@getpara/graz-integration 2.0.0-dev.10

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,63 @@
+"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("Para connector: user closed login modal");
+        if (Date.now() >= deadline) throw new Error("Para connector: login timeout");
+        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;
+        throw err;
+      } 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,79 @@
+"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() {
+  if (!rendererPromise) {
+    rendererPromise = (() => __async(this, null, function* () {
+      try {
+        const { createRoot } = yield import("react-dom/client");
+        return { createRoot: (el) => createRoot(el) };
+      } catch (e) {
+        const ReactDOM = yield import("react-dom");
+        return {
+          legacyRender: ReactDOM.render,
+          legacyUnmount: ReactDOM.unmountComponentAtNode
+        };
+      }
+    }))();
+  }
+  return rendererPromise;
+}
+function renderModal(para, modalProps, onCloseArg, queryClient) {
+  return __async(this, null, function* () {
+    var _a, _b, _c;
+    if (typeof window === "undefined") {
+      return;
+    }
+    const props = modalProps != null ? modalProps : {};
+    const containerId = "para-modal";
+    let container = document.getElementById(containerId);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = containerId;
+      document.body.appendChild(container);
+    }
+    const renderer = yield getRenderer();
+    let root = (_a = container.__paraRoot) != null ? _a : null;
+    if (!root && renderer.createRoot) {
+      root = renderer.createRoot(container);
+      container.__paraRoot = root;
+    }
+    const { ParaProvider } = yield import("@getpara/react-sdk-lite");
+    const { QueryClientProvider } = yield import("@tanstack/react-query");
+    const handleClose = () => {
+      var _a2, _b2;
+      onCloseArg();
+      (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
+      setIsOpen(false);
+      if (root) {
+        root.unmount();
+      } else {
+        (_b2 = renderer.legacyUnmount) == null ? void 0 : _b2.call(renderer, container);
+      }
+      container == null ? void 0 : container.remove();
+    };
+    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 })
+      }
+    ) });
+    if (root) {
+      root.render(element);
+    } else {
+      (_c = renderer.legacyRender) == null ? void 0 : _c.call(renderer, element, container);
+    }
+    setIsOpen(true);
+  });
+}
+export {
+  renderModal
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ParaGrazConnector } from './connector';
+export type { ParaModalProps, ParaGrazConfig } from './connector';
+export type { ParaGrazConfig as CoreParaGrazConfig } from '@getpara/graz-connector';
+export { ParaWeb, Environment, WalletType, AuthLayout, AuthMethod, OAuthMethod } from '@getpara/react-sdk-lite';

package/dist/index.js

@@ -0,0 +1,13 @@
+"use client";
+import "./chunk-IV3L3JVM.js";
+import { ParaGrazConnector } from "./connector";
+import { ParaWeb, Environment, WalletType, AuthLayout, AuthMethod, OAuthMethod } from "@getpara/react-sdk-lite";
+export {
+  AuthLayout,
+  AuthMethod,
+  Environment,
+  OAuthMethod,
+  ParaGrazConnector,
+  ParaWeb,
+  WalletType
+};

package/dist/package.json

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

package/package.json

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

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,67 @@
+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('Para connector: user closed login modal');
+      if (Date.now() >= deadline) throw new Error('Para connector: login timeout');
+      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;
+      throw err;
+    } finally {
+      this.isModalClosed = true;
+    }
+  }
+}

package/src/connectorModal.tsx

@@ -0,0 +1,83 @@
+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() {
+  if (!rendererPromise) {
+    rendererPromise = (async () => {
+      try {
+        const { createRoot } = await import('react-dom/client');
+        return { createRoot: (el: HTMLElement) => createRoot(el) };
+      } catch {
+        const ReactDOM = await import('react-dom');
+        return {
+          legacyRender: ReactDOM.render,
+          legacyUnmount: ReactDOM.unmountComponentAtNode,
+        };
+      }
+    })();
+  }
+  return rendererPromise;
+}
+
+export async function renderModal(
+  para: ParaWeb,
+  modalProps: Partial<ParaModalProps> | undefined,
+  onCloseArg: () => void,
+  queryClient: QueryClient,
+): Promise<void> {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  const props = modalProps ?? {};
+  const containerId = 'para-modal';
+  let container = document.getElementById(containerId) as HTMLElement | null;
+  if (!container) {
+    container = document.createElement('div');
+    container.id = containerId;
+    document.body.appendChild(container);
+  }
+  const renderer = await getRenderer();
+  let root: Root | null = (container as any).__paraRoot ?? null;
+  if (!root && renderer.createRoot) {
+    root = renderer.createRoot(container);
+    (container as any).__paraRoot = root;
+  }
+  const { ParaProvider } = await import('@getpara/react-sdk-lite');
+  const { QueryClientProvider } = await import('@tanstack/react-query');
+  const handleClose = () => {
+    onCloseArg();
+    props.onClose?.();
+    setIsOpen(false);
+    if (root) {
+      root.unmount();
+    } else {
+      renderer.legacyUnmount?.(container!);
+    }
+    container?.remove();
+  };
+  const element = (
+    <QueryClientProvider client={queryClient}>
+      <ParaProvider
+        paraClientConfig={para}
+        config={{ appName: props.appName ?? '' }}
+        paraModalConfig={{ ...props, onClose: handleClose }}
+      />
+    </QueryClientProvider>
+  );
+  if (root) {
+    root.render(element);
+  } else {
+    renderer.legacyRender?.(element, container!);
+  }
+  setIsOpen(true);
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { ParaGrazConnector } from './connector';
+export type { ParaModalProps, ParaGrazConfig } from './connector';
+export type { ParaGrazConfig as CoreParaGrazConfig } from '@getpara/graz-connector';
+export { ParaWeb, Environment, WalletType, AuthLayout, AuthMethod, OAuthMethod } from '@getpara/react-sdk-lite';

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__"]
+}

package/vitest.config.js

@@ -0,0 +1,22 @@
+import { mergeConfig } from 'vite';
+import baseConfig from '../../vitest.config.js';
+
+export default mergeConfig(baseConfig, {
+  test: {
+    environment: 'jsdom',
+    coverage: {
+      provider: 'v8',
+      reporter: ['html', 'text'],
+      all: true,
+      include: ['src/**/*.{ts,tsx,js,jsx}'],
+      thresholds: {
+        lines: 98,
+        functions: 90,
+        branches: 98,
+        statements: 98,
+      },
+      reportOnFailure: true,
+      exclude: ['src/index.ts'],
+    },
+  },
+});