@getpara/graz-integration 2.0.0-alpha.50

package/dist/chunk-IV3L3JVM.js

@@ -0,0 +1,46 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __async
+};

package/dist/connector.d.ts

@@ -0,0 +1,18 @@
+import { ChainInfo } from '@keplr-wallet/types';
+import { ParaGrazConnector as CoreParaGrazConnector, ParaGrazConfig as CoreParaGrazConfig } from '@getpara/graz-connector';
+import { ParaModalProps as CoreParaModalProps } from '@getpara/react-sdk-lite';
+import { QueryClient } from '@tanstack/react-query';
+export type ParaModalProps = Omit<CoreParaModalProps, 'isOpen' | 'para'> & {
+    appName: string;
+};
+export interface ParaGrazConfig extends CoreParaGrazConfig {
+    modalProps?: ParaModalProps;
+    queryClient?: QueryClient;
+}
+export declare class ParaGrazConnector extends CoreParaGrazConnector {
+    protected isModalClosed: boolean;
+    protected config: ParaGrazConfig;
+    constructor(config: ParaGrazConfig, chains?: ChainInfo[] | null);
+    protected waitForLogin(timeoutMs?: number): Promise<void>;
+    enable(chainIdsInput: string | string[]): Promise<void>;
+}

package/dist/connector.js

@@ -0,0 +1,72 @@
+"use client";
+import {
+  __async
+} from "./chunk-IV3L3JVM.js";
+import {
+  ParaGrazConnector as CoreParaGrazConnector,
+  toArray
+} from "@getpara/graz-connector";
+import { renderModal } from "./connectorModal";
+class ParaGrazConnector extends CoreParaGrazConnector {
+  constructor(config, chains) {
+    super(config, chains);
+    this.isModalClosed = true;
+  }
+  waitForLogin(timeoutMs = 6e4) {
+    return __async(this, null, function* () {
+      const deadline = Date.now() + timeoutMs;
+      let delay = 500;
+      const MAX_DELAY = 5e3;
+      while (true) {
+        if (yield this.paraWebClient.isFullyLoggedIn()) {
+          return;
+        }
+        if (this.isModalClosed) {
+          throw new Error("Login modal closed by user");
+        }
+        if (Date.now() >= deadline) {
+          throw new Error(`Login timeout after ${timeoutMs / 1e3}s`);
+        }
+        yield new Promise((r) => setTimeout(r, delay));
+        delay = Math.min(delay * 1.5, MAX_DELAY);
+      }
+    });
+  }
+  enable(chainIdsInput) {
+    return __async(this, null, function* () {
+      var _a, _b, _c, _d, _e;
+      const chainIds = toArray(chainIdsInput);
+      const previousEnabled = new Set(this.enabledChainIds);
+      try {
+        chainIds.forEach((id) => this.enabledChainIds.add(id));
+        if (yield this.hasCosmosWallet()) {
+          (_b = (_a = this.events) == null ? void 0 : _a.onEnabled) == null ? void 0 : _b.call(_a, chainIds, this);
+          return;
+        }
+        this.isModalClosed = false;
+        yield renderModal(
+          this.paraWebClient,
+          (_c = this.config.modalProps) != null ? _c : {},
+          () => {
+            this.isModalClosed = true;
+          },
+          this.config.queryClient
+        );
+        yield this.waitForLogin();
+        yield this.waitForAccounts();
+        (_e = (_d = this.events) == null ? void 0 : _d.onEnabled) == null ? void 0 : _e.call(_d, chainIds, this);
+      } catch (err) {
+        this.enabledChainIds = previousEnabled;
+        if (err instanceof Error) {
+          throw err;
+        }
+        throw new Error("Failed to enable Para wallet with modal");
+      } finally {
+        this.isModalClosed = true;
+      }
+    });
+  }
+}
+export {
+  ParaGrazConnector
+};

package/dist/connectorModal.d.ts

@@ -0,0 +1,4 @@
+import ParaWeb from '@getpara/react-sdk-lite';
+import { type QueryClient } from '@tanstack/react-query';
+import { ParaModalProps } from './connector';
+export declare function renderModal(para: ParaWeb, modalProps: Partial<ParaModalProps> | undefined, onCloseArg: () => void, queryClient: QueryClient): Promise<void>;

package/dist/connectorModal.js

@@ -0,0 +1,115 @@
+"use client";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-IV3L3JVM.js";
+import { jsx } from "react/jsx-runtime";
+import { setIsOpen } from "@getpara/react-sdk-lite";
+let rendererPromise = null;
+function getRenderer() {
+  console.log("[DEBUG] getRenderer called.");
+  if (!rendererPromise) {
+    rendererPromise = (() => __async(this, null, function* () {
+      try {
+        const { createRoot } = yield import("react-dom/client");
+        console.log("[DEBUG] Imported createRoot from react-dom/client.");
+        return { createRoot: (el) => createRoot(el) };
+      } catch (err) {
+        console.log(
+          "[DEBUG] Failed to import react-dom/client; falling back to legacy ReactDOM. Error:",
+          err.message
+        );
+        const ReactDOM = yield import("react-dom");
+        console.log("[DEBUG] Imported legacy ReactDOM.");
+        return {
+          legacyRender: ReactDOM.render,
+          legacyUnmount: ReactDOM.unmountComponentAtNode
+        };
+      }
+    }))();
+  }
+  return rendererPromise;
+}
+const wrap = (ctx, err, extraInfo) => {
+  const baseMsg = `connectorModal error in ${ctx}: ${err.message}`;
+  const fullMsg = extraInfo ? `${baseMsg}. Additional details: ${extraInfo}` : baseMsg;
+  throw new Error(fullMsg);
+};
+function renderModal(para, modalProps, onCloseArg, queryClient) {
+  return __async(this, null, function* () {
+    var _a, _b, _c;
+    console.log("[DEBUG] renderModal called with para:", para, "modalProps:", modalProps, "queryClient:", queryClient);
+    if (typeof window === "undefined") {
+      console.log("[DEBUG] renderModal: window undefined, returning early.");
+      return;
+    }
+    const props = modalProps != null ? modalProps : {};
+    console.log("[DEBUG] Using modal props:", props);
+    const containerId = "para-modal";
+    let container = document.getElementById(containerId);
+    console.log("[DEBUG] Existing container:", container);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = containerId;
+      document.body.appendChild(container);
+      console.log("[DEBUG] Created new container:", container);
+    }
+    try {
+      const renderer = yield getRenderer();
+      console.log("[DEBUG] Retrieved renderer:", renderer);
+      let root = (_a = container.__paraRoot) != null ? _a : null;
+      console.log("[DEBUG] Existing root:", root);
+      if (!root && renderer.createRoot) {
+        root = renderer.createRoot(container);
+        container.__paraRoot = root;
+        console.log("[DEBUG] Created new root with createRoot.");
+      }
+      const { ParaProvider } = yield import("@getpara/react-sdk-lite");
+      console.log("[DEBUG] Imported ParaProvider from @getpara/react-sdk-lite.");
+      const { QueryClientProvider } = yield import("@tanstack/react-query");
+      console.log("[DEBUG] Imported QueryClientProvider from @tanstack/react-query.");
+      const handleClose = () => {
+        var _a2, _b2;
+        console.log("[DEBUG] handleClose triggered.");
+        onCloseArg();
+        (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
+        setIsOpen(false);
+        if (root) {
+          root.unmount();
+          console.log("[DEBUG] Unmounted using root.unmount.");
+        } else {
+          (_b2 = renderer.legacyUnmount) == null ? void 0 : _b2.call(renderer, container);
+          console.log("[DEBUG] Unmounted using legacyUnmount.");
+        }
+        container == null ? void 0 : container.remove();
+        console.log("[DEBUG] Removed container.");
+      };
+      const element = /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(
+        ParaProvider,
+        {
+          paraClientConfig: para,
+          config: { appName: (_b = props.appName) != null ? _b : "" },
+          paraModalConfig: __spreadProps(__spreadValues({}, props), { onClose: handleClose })
+        }
+      ) });
+      console.log("[DEBUG] Created render element.");
+      if (root) {
+        root.render(element);
+        console.log("[DEBUG] Rendered using root.render.");
+      } else {
+        (_c = renderer.legacyRender) == null ? void 0 : _c.call(renderer, element, container);
+        console.log("[DEBUG] Rendered using legacyRender.");
+      }
+      setIsOpen(true);
+      console.log("[DEBUG] Set modal isOpen to true.");
+    } catch (err) {
+      console.log("[DEBUG] Error in renderModal; cleaning up container.");
+      container == null ? void 0 : container.remove();
+      throw wrap("renderModal", err, `containerId: ${containerId}, modalProps: ${JSON.stringify(props)}`);
+    }
+  });
+}
+export {
+  renderModal
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { ParaGrazConnector } from './connector';
+export type { ParaModalProps, ParaGrazConfig } from './connector';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use client";
+import "./chunk-IV3L3JVM.js";
+import { ParaGrazConnector } from "./connector";
+export {
+  ParaGrazConnector
+};

package/dist/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "sideEffects": false
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@getpara/graz-integration",
+  "version": "2.0.0-alpha.50",
+  "sideEffects": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "typegen": "tsc --emitDeclarationOnly",
+    "build": "rm -rf dist && yarn typegen && node ./scripts/build.mjs"
+  },
+  "dependencies": {
+    "@getpara/graz-connector": "2.0.0-alpha.50"
+  },
+  "devDependencies": {
+    "@getpara/react-sdk-lite": "2.0.0-alpha.50",
+    "@tanstack/react-query": "^5.74.0",
+    "graz": "^0.3.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "5.1.6"
+  },
+  "peerDependencies": {
+    "@getpara/react-sdk-lite": "2.0.0-alpha.50",
+    "@tanstack/react-query": "^5.74.0",
+    "graz": "^0.3.3",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  }
+}

package/scripts/build.mjs

@@ -0,0 +1,36 @@
+import * as esbuild from 'esbuild';
+import * as fs from 'fs/promises';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import { glob } from 'glob';
+
+const entryPoints = await glob('src/**/*.{ts,tsx,js,jsx}');
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const distDir = resolve(__dirname, '../dist');
+
+await fs.mkdir(distDir, { recursive: true });
+await fs.writeFile(`${distDir}/package.json`, JSON.stringify({ type: 'module', sideEffects: false }, null, 2));
+
+/** @type {import('esbuild').BuildOptions} */
+await esbuild.build({
+  banner: {
+    js: '"use client";', // Required for Next 13 App Router
+  },
+  bundle: false,
+  write: true,
+  format: 'esm',
+  loader: {
+    '.png': 'dataurl',
+    '.svg': 'dataurl',
+    '.json': 'text',
+  },
+  platform: 'browser',
+  entryPoints,
+  outdir: distDir,
+  allowOverwrite: true,
+  splitting: true, // Required for tree shaking
+  minify: false,
+  target: ['es2015'],
+  packages: 'external',
+});

package/src/connector.ts

@@ -0,0 +1,88 @@
+import { ChainInfo } from '@keplr-wallet/types';
+import {
+  ParaGrazConnector as CoreParaGrazConnector,
+  ParaGrazConfig as CoreParaGrazConfig,
+  toArray,
+} from '@getpara/graz-connector';
+import { ParaModalProps as CoreParaModalProps } from '@getpara/react-sdk-lite';
+import { renderModal } from './connectorModal';
+import { QueryClient } from '@tanstack/react-query';
+
+export type ParaModalProps = Omit<CoreParaModalProps, 'isOpen' | 'para'> & { appName: string };
+
+export interface ParaGrazConfig extends CoreParaGrazConfig {
+  modalProps?: ParaModalProps;
+  queryClient?: QueryClient;
+}
+
+export class ParaGrazConnector extends CoreParaGrazConnector {
+  protected isModalClosed = true;
+  declare protected config: ParaGrazConfig;
+
+  constructor(config: ParaGrazConfig, chains?: ChainInfo[] | null) {
+    super(config, chains);
+  }
+
+  protected async waitForLogin(timeoutMs = 60_000): Promise<void> {
+    const deadline = Date.now() + timeoutMs;
+    let delay = 500;
+    const MAX_DELAY = 5_000;
+
+    while (true) {
+      if (await this.paraWebClient.isFullyLoggedIn()) {
+        return;
+      }
+
+      if (this.isModalClosed) {
+        throw new Error('Login modal closed by user');
+      }
+
+      if (Date.now() >= deadline) {
+        throw new Error(`Login timeout after ${timeoutMs / 1000}s`);
+      }
+
+      await new Promise(r => setTimeout(r, delay));
+      delay = Math.min(delay * 1.5, MAX_DELAY);
+    }
+  }
+
+  async enable(chainIdsInput: string | string[]): Promise<void> {
+    const chainIds = toArray(chainIdsInput);
+    const previousEnabled = new Set(this.enabledChainIds);
+
+    try {
+      chainIds.forEach(id => this.enabledChainIds.add(id));
+
+      if (await this.hasCosmosWallet()) {
+        this.events?.onEnabled?.(chainIds, this);
+        return;
+      }
+
+      this.isModalClosed = false;
+
+      await renderModal(
+        this.paraWebClient,
+        this.config.modalProps ?? {},
+        () => {
+          this.isModalClosed = true;
+        },
+        this.config.queryClient!,
+      );
+
+      await this.waitForLogin();
+      await this.waitForAccounts();
+
+      this.events?.onEnabled?.(chainIds, this);
+    } catch (err) {
+      this.enabledChainIds = previousEnabled;
+
+      if (err instanceof Error) {
+        throw err;
+      }
+
+      throw new Error('Failed to enable Para wallet with modal');
+    } finally {
+      this.isModalClosed = true;
+    }
+  }
+}

package/src/connectorModal.tsx

@@ -0,0 +1,120 @@
+import ParaWeb, { setIsOpen } from '@getpara/react-sdk-lite';
+import React from 'react';
+import { type QueryClient } from '@tanstack/react-query';
+import { ParaModalProps } from './connector';
+
+type Root = { render(node: React.ReactNode): void; unmount(): void };
+
+let rendererPromise: Promise<{
+  createRoot?: (el: HTMLElement) => Root;
+  legacyRender?: (node: React.ReactNode, el: HTMLElement) => void;
+  legacyUnmount?: (el: HTMLElement) => void;
+}> | null = null;
+
+function getRenderer() {
+  console.log('[DEBUG] getRenderer called.');
+  if (!rendererPromise) {
+    rendererPromise = (async () => {
+      try {
+        const { createRoot } = await import('react-dom/client');
+        console.log('[DEBUG] Imported createRoot from react-dom/client.');
+        return { createRoot: (el: HTMLElement) => createRoot(el) };
+      } catch (err) {
+        console.log(
+          '[DEBUG] Failed to import react-dom/client; falling back to legacy ReactDOM. Error:',
+          (err as Error).message,
+        );
+        const ReactDOM = await import('react-dom');
+        console.log('[DEBUG] Imported legacy ReactDOM.');
+        return {
+          legacyRender: ReactDOM.render,
+          legacyUnmount: ReactDOM.unmountComponentAtNode,
+        };
+      }
+    })();
+  }
+  return rendererPromise;
+}
+
+const wrap = (ctx: string, err: unknown, extraInfo?: string): never => {
+  const baseMsg = `connectorModal error in ${ctx}: ${(err as Error).message}`;
+  const fullMsg = extraInfo ? `${baseMsg}. Additional details: ${extraInfo}` : baseMsg;
+  throw new Error(fullMsg);
+};
+
+export async function renderModal(
+  para: ParaWeb,
+  modalProps: Partial<ParaModalProps> | undefined,
+  onCloseArg: () => void,
+  queryClient: QueryClient,
+): Promise<void> {
+  console.log('[DEBUG] renderModal called with para:', para, 'modalProps:', modalProps, 'queryClient:', queryClient);
+  if (typeof window === 'undefined') {
+    console.log('[DEBUG] renderModal: window undefined, returning early.');
+    return;
+  }
+  const props = modalProps ?? {};
+  console.log('[DEBUG] Using modal props:', props);
+  const containerId = 'para-modal';
+  let container = document.getElementById(containerId) as HTMLElement | null;
+  console.log('[DEBUG] Existing container:', container);
+  if (!container) {
+    container = document.createElement('div');
+    container.id = containerId;
+    document.body.appendChild(container);
+    console.log('[DEBUG] Created new container:', container);
+  }
+  try {
+    const renderer = await getRenderer();
+    console.log('[DEBUG] Retrieved renderer:', renderer);
+    let root: Root | null = (container as any).__paraRoot ?? null;
+    console.log('[DEBUG] Existing root:', root);
+    if (!root && renderer.createRoot) {
+      root = renderer.createRoot(container);
+      (container as any).__paraRoot = root;
+      console.log('[DEBUG] Created new root with createRoot.');
+    }
+    const { ParaProvider } = await import('@getpara/react-sdk-lite');
+    console.log('[DEBUG] Imported ParaProvider from @getpara/react-sdk-lite.');
+    const { QueryClientProvider } = await import('@tanstack/react-query');
+    console.log('[DEBUG] Imported QueryClientProvider from @tanstack/react-query.');
+    const handleClose = () => {
+      console.log('[DEBUG] handleClose triggered.');
+      onCloseArg();
+      props.onClose?.();
+      setIsOpen(false);
+      if (root) {
+        root.unmount();
+        console.log('[DEBUG] Unmounted using root.unmount.');
+      } else {
+        renderer.legacyUnmount?.(container!);
+        console.log('[DEBUG] Unmounted using legacyUnmount.');
+      }
+      container?.remove();
+      console.log('[DEBUG] Removed container.');
+    };
+    const element = (
+      <QueryClientProvider client={queryClient}>
+        <ParaProvider
+          paraClientConfig={para}
+          config={{ appName: props.appName ?? '' }}
+          paraModalConfig={{ ...props, onClose: handleClose }}
+        />
+      </QueryClientProvider>
+    );
+    console.log('[DEBUG] Created render element.');
+    if (root) {
+      root.render(element);
+      console.log('[DEBUG] Rendered using root.render.');
+    } else {
+      renderer.legacyRender?.(element, container!);
+      console.log('[DEBUG] Rendered using legacyRender.');
+    }
+    setIsOpen(true);
+    console.log('[DEBUG] Set modal isOpen to true.');
+  } catch (err) {
+    console.log('[DEBUG] Error in renderModal; cleaning up container.');
+    container?.remove();
+    throw wrap('renderModal', err, `containerId: ${containerId}, modalProps: ${JSON.stringify(props)}`);
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { ParaGrazConnector } from './connector';
+export type { ParaModalProps, ParaGrazConfig } from './connector';

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "declaration": true,
+    "declarationDir": "./dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx", "__tests__"]
+}