@getpara/react-sdk 0.1.0 → 0.2.1

package/dist/provider/hooks/utils/useAutoSessionKeepAlive.js

@@ -0,0 +1,79 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useEffect, useRef } from 'react';
+import { useAccount, useClient, useKeepSessionAlive, useLogout } from '../index.js';
+const SESSION_CHECK_INTERVAL = 60000;
+const SESSION_REFRESH_THRESHOLD = 300000;
+export const useAutoSessionKeepAlive = ({ disabled }) => {
+    const client = useClient();
+    const { data: account } = useAccount();
+    const { logoutAsync } = useLogout();
+    const { keepSessionAliveAsync } = useKeepSessionAlive();
+    const sessionCheckInterval = useRef(null);
+    useEffect(() => {
+        if (!client || disabled) {
+            clearSessionMonitoring();
+            return;
+        }
+        if (account === null || account === void 0 ? void 0 : account.isConnected) {
+            setupSessionMonitoring();
+        }
+        else {
+            clearSessionMonitoring();
+        }
+        return () => clearSessionMonitoring();
+    }, [client, account, disabled]);
+    const getSessionExpiry = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const sessionCookie = yield client.retrieveSessionCookie();
+            if (!sessionCookie)
+                return null;
+            const expiresMatch = sessionCookie.match(/Expires=([^;]+)/);
+            return expiresMatch ? new Date(expiresMatch[1]) : null;
+        }
+        catch (err) {
+            return null;
+        }
+    });
+    const setupSessionMonitoring = () => {
+        clearSessionMonitoring();
+        sessionCheckInterval.current = setInterval(() => __awaiter(void 0, void 0, void 0, function* () {
+            const expiry = yield getSessionExpiry();
+            if (!expiry) {
+                yield logoutAsync();
+                clearSessionMonitoring();
+                return;
+            }
+            const timeUntilExpiry = expiry.getTime() - Date.now();
+            if (timeUntilExpiry <= 0) {
+                yield logoutAsync();
+                clearSessionMonitoring();
+                return;
+            }
+            if (timeUntilExpiry <= SESSION_REFRESH_THRESHOLD) {
+                try {
+                    yield keepSessionAliveAsync();
+                    setupSessionMonitoring();
+                }
+                catch (err) {
+                    console.error('Failed to keep session alive:', err);
+                    yield logoutAsync();
+                    clearSessionMonitoring();
+                }
+                return;
+            }
+        }), SESSION_CHECK_INTERVAL);
+    };
+    const clearSessionMonitoring = () => {
+        if (sessionCheckInterval.current) {
+            clearInterval(sessionCheckInterval.current);
+        }
+    };
+};

package/dist/provider/hooks/utils/useClient.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Hook for retrieving the Para client
+ */
+export declare const useClient: () => import("@getpara/web-sdk").ParaWeb;

package/dist/provider/hooks/utils/useClient.js

@@ -0,0 +1,8 @@
+import { useStore } from '../../stores/useStore.js';
+/**
+ * Hook for retrieving the Para client
+ */
+export const useClient = () => {
+    const client = useStore(state => state.client);
+    return client;
+};

package/dist/provider/hooks/utils/useEventListeners.d.ts

@@ -0,0 +1,2 @@
+import { Callbacks } from '../../types/provider.js';
+export declare const useEventListeners: ({ onLogin, onLogout, onAccountSetup, onAccountCreation, onSignMessage, onSignTransaction, onWalletCreated, onPregenWalletClaimed, onExternalWalletChange, onWalletsChange, }: Callbacks) => void;

package/dist/provider/hooks/utils/useEventListeners.js

@@ -0,0 +1,87 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { useClient, useWalletState } from '../index.js';
+import { ParaEvent, } from '@getpara/web-sdk';
+import { ACCOUNT_BASE_KEY } from '../queries/useAccount.js';
+import { useStore } from '../../stores/useStore.js';
+import { WALLET_BASE_KEY } from '../../hooks/queries/useWallet.js';
+export const useEventListeners = ({ onLogin, onLogout, onAccountSetup, onAccountCreation, onSignMessage, onSignTransaction, onWalletCreated, onPregenWalletClaimed, onExternalWalletChange, onWalletsChange, }) => {
+    const queryClient = useQueryClient();
+    const client = useClient();
+    const clearSelectedWallet = useStore(state => state.clearSelectedWallet);
+    const { selectedWallet, setSelectedWallet } = useWalletState();
+    const loginListener = (event) => {
+        loginOrSetupListener();
+        onLogin === null || onLogin === void 0 ? void 0 : onLogin(event);
+    };
+    const accountSetupListener = (event) => {
+        loginOrSetupListener();
+        onAccountSetup === null || onAccountSetup === void 0 ? void 0 : onAccountSetup(event);
+    };
+    const loginOrSetupListener = () => {
+        queryClient.invalidateQueries({ queryKey: [ACCOUNT_BASE_KEY], exact: false });
+        queryClient.invalidateQueries({ queryKey: [WALLET_BASE_KEY], exact: false });
+    };
+    const accountCreationListener = (event) => {
+        onAccountCreation === null || onAccountCreation === void 0 ? void 0 : onAccountCreation(event);
+    };
+    const logoutListener = (event) => {
+        queryClient.invalidateQueries({ queryKey: [ACCOUNT_BASE_KEY], exact: false });
+        clearSelectedWallet();
+        onLogout === null || onLogout === void 0 ? void 0 : onLogout(event);
+    };
+    const signMessageListener = (event) => {
+        onSignMessage === null || onSignMessage === void 0 ? void 0 : onSignMessage(event);
+    };
+    const signTransactionListener = (event) => {
+        onSignTransaction === null || onSignTransaction === void 0 ? void 0 : onSignTransaction(event);
+    };
+    const walletChangeListener = (event) => {
+        updateSelectedWallet();
+        onWalletsChange === null || onWalletsChange === void 0 ? void 0 : onWalletsChange(event);
+    };
+    const externalWalletChangeListener = (event) => {
+        updateSelectedWallet();
+        onExternalWalletChange === null || onExternalWalletChange === void 0 ? void 0 : onExternalWalletChange(event);
+    };
+    const walletCreatedListener = (event) => {
+        onWalletCreated === null || onWalletCreated === void 0 ? void 0 : onWalletCreated(event);
+    };
+    const pregenWalletClaimedListener = (event) => {
+        onPregenWalletClaimed === null || onPregenWalletClaimed === void 0 ? void 0 : onPregenWalletClaimed(event);
+    };
+    const updateSelectedWallet = () => {
+        if (!client) {
+            clearSelectedWallet();
+            return;
+        }
+        if (!(selectedWallet === null || selectedWallet === void 0 ? void 0 : selectedWallet.id) || !client.findWallet(selectedWallet === null || selectedWallet === void 0 ? void 0 : selectedWallet.id)) {
+            const defaultWallet = client.findWallet(undefined, undefined, { forbidPregen: true });
+            setSelectedWallet({ id: defaultWallet === null || defaultWallet === void 0 ? void 0 : defaultWallet.id, type: defaultWallet === null || defaultWallet === void 0 ? void 0 : defaultWallet.type });
+        }
+    };
+    useEffect(() => {
+        window.addEventListener(ParaEvent.LOGIN_EVENT, loginListener);
+        window.addEventListener(ParaEvent.ACCOUNT_SETUP_EVENT, accountSetupListener);
+        window.addEventListener(ParaEvent.ACCOUNT_CREATION_EVENT, accountCreationListener);
+        window.addEventListener(ParaEvent.LOGOUT_EVENT, logoutListener);
+        window.addEventListener(ParaEvent.SIGN_MESSAGE_EVENT, signMessageListener);
+        window.addEventListener(ParaEvent.SIGN_TRANSACTION_EVENT, signTransactionListener);
+        window.addEventListener(ParaEvent.WALLETS_CHANGE_EVENT, walletChangeListener);
+        window.addEventListener(ParaEvent.EXTERNAL_WALLET_CHANGE_EVENT, externalWalletChangeListener);
+        window.addEventListener(ParaEvent.WALLET_CREATED, walletCreatedListener);
+        window.addEventListener(ParaEvent.PREGEN_WALLET_CLAIMED, pregenWalletClaimedListener);
+        return () => {
+            window.removeEventListener(ParaEvent.LOGIN_EVENT, loginListener);
+            window.removeEventListener(ParaEvent.ACCOUNT_SETUP_EVENT, accountSetupListener);
+            window.removeEventListener(ParaEvent.ACCOUNT_CREATION_EVENT, accountCreationListener);
+            window.removeEventListener(ParaEvent.LOGOUT_EVENT, logoutListener);
+            window.removeEventListener(ParaEvent.SIGN_MESSAGE_EVENT, signMessageListener);
+            window.removeEventListener(ParaEvent.SIGN_TRANSACTION_EVENT, signTransactionListener);
+            window.removeEventListener(ParaEvent.WALLETS_CHANGE_EVENT, walletChangeListener);
+            window.removeEventListener(ParaEvent.EXTERNAL_WALLET_CHANGE_EVENT, externalWalletChangeListener);
+            window.removeEventListener(ParaEvent.WALLET_CREATED, walletCreatedListener);
+            window.removeEventListener(ParaEvent.PREGEN_WALLET_CLAIMED, pregenWalletClaimedListener);
+        };
+    }, [client]);
+};

package/dist/provider/hooks/utils/useInternalClient.d.ts

@@ -0,0 +1,5 @@
+import { ParaInternal } from '@getpara/react-common';
+/**
+ * Hook for retrieving the Para internal client
+ */
+export declare const useInternalClient: () => ParaInternal;

package/dist/provider/hooks/utils/useInternalClient.js

@@ -0,0 +1,9 @@
+// DO NOT EXPORT THIS FROM THE INDEX!
+import { useStore } from '../../stores/useStore.js';
+/**
+ * Hook for retrieving the Para internal client
+ */
+export const useInternalClient = () => {
+    const client = useStore(state => state.client);
+    return client;
+};

package/dist/provider/hooks/utils/useModal.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Hook for controlling the Para modal
+ */
+export declare const useModal: () => {
+    isOpen: boolean;
+    openModal: () => void;
+    closeModal: () => void;
+};

package/dist/provider/hooks/utils/useModal.js

@@ -0,0 +1,15 @@
+import { useStore } from '../../stores/useStore.js';
+/**
+ * Hook for controlling the Para modal
+ */
+export const useModal = () => {
+    const isOpen = useStore(state => state.isOpen);
+    const setIsOpen = useStore(state => state.setIsOpen);
+    const openModal = () => {
+        setIsOpen(true);
+    };
+    const closeModal = () => {
+        setIsOpen(false);
+    };
+    return { isOpen, openModal, closeModal };
+};

package/dist/provider/hooks/utils/useWalletState.d.ts

@@ -0,0 +1,14 @@
+import { WalletType } from '@getpara/web-sdk';
+/**
+ * Hook for controlling selected wallet
+ */
+export declare const useWalletState: () => {
+    selectedWallet: {
+        id: string;
+        type: WalletType;
+    };
+    setSelectedWallet: ({ id, type }: {
+        id?: string;
+        type?: WalletType;
+    }) => void;
+};

package/dist/provider/hooks/utils/useWalletState.js

@@ -0,0 +1,33 @@
+import { useStore } from '../../stores/useStore.js';
+import { useClient } from './useClient.js';
+/**
+ * Hook for controlling selected wallet
+ */
+export const useWalletState = () => {
+    const client = useClient();
+    const selectedWalletId = useStore(state => state.selectedWalletId);
+    const selectedWalletType = useStore(state => state.selectedWalletType);
+    const setStoredSelectedWallet = useStore(state => state.setSelectedWallet);
+    const clearSelectedWallet = useStore(state => state.clearSelectedWallet);
+    const setSelectedWallet = ({ id, type }) => {
+        try {
+            const validId = client.findWalletId(id, { type: [type] });
+            if (validId !== id) {
+                clearSelectedWallet();
+            }
+            else {
+                setStoredSelectedWallet(id, type);
+            }
+        }
+        catch (e) {
+            clearSelectedWallet();
+        }
+    };
+    return {
+        selectedWallet: {
+            id: selectedWalletId,
+            type: selectedWalletType,
+        },
+        setSelectedWallet,
+    };
+};

package/dist/provider/index.d.ts

@@ -0,0 +1,3 @@
+export { ParaProvider } from './ParaProvider.js';
+export * from './hooks/index.js';
+export * from './stores/getters.js';

package/dist/provider/index.js

@@ -0,0 +1,3 @@
+export { ParaProvider } from './ParaProvider.js';
+export * from './hooks/index.js';
+export * from './stores/getters.js';

package/dist/provider/stores/getters.d.ts

@@ -0,0 +1,4 @@
+export declare const getClient: () => import("@getpara/web-sdk").ParaWeb;
+export declare const getIsOpen: () => boolean;
+export declare const getSelectedWalletId: () => string;
+export declare const getSelectedWalletType: () => import("@getpara/user-management-client").WalletType;

package/dist/provider/stores/getters.js

@@ -0,0 +1,5 @@
+import { useStore } from './useStore.js';
+export const getClient = () => useStore().client;
+export const getIsOpen = () => useStore().isOpen;
+export const getSelectedWalletId = () => useStore().selectedWalletId;
+export const getSelectedWalletType = () => useStore().selectedWalletType;

package/dist/provider/stores/slices/client.d.ts

@@ -0,0 +1,3 @@
+import { StateCreator } from 'zustand';
+import { ClientSlice, Store } from '../types.js';
+export declare const createClientSlice: StateCreator<Store, [], [], ClientSlice>;

package/dist/provider/stores/slices/client.js

@@ -0,0 +1,4 @@
+export const createClientSlice = set => ({
+    client: undefined,
+    setClient: client => set({ client }),
+});

package/dist/provider/stores/slices/index.d.ts

@@ -0,0 +1,3 @@
+export * from './client.js';
+export * from './modal.js';
+export * from './wallet.js';

package/dist/provider/stores/slices/index.js

@@ -0,0 +1,3 @@
+export * from './client.js';
+export * from './modal.js';
+export * from './wallet.js';

package/dist/provider/stores/slices/modal.d.ts

@@ -0,0 +1,3 @@
+import { StateCreator } from 'zustand';
+import { ModalSlice, Store } from '../types.js';
+export declare const createModalSlice: StateCreator<Store, [], [], ModalSlice>;

package/dist/provider/stores/slices/modal.js

@@ -0,0 +1,4 @@
+export const createModalSlice = set => ({
+    isOpen: false,
+    setIsOpen: isOpen => set({ isOpen }),
+});

package/dist/provider/stores/slices/wallet.d.ts

@@ -0,0 +1,3 @@
+import { StateCreator } from 'zustand';
+import { Store, WalletSlice } from '../types.js';
+export declare const createWalletSlice: StateCreator<Store, [], [], WalletSlice>;

package/dist/provider/stores/slices/wallet.js

@@ -0,0 +1,6 @@
+export const createWalletSlice = set => ({
+    selectedWalletId: undefined,
+    selectedWalletType: undefined,
+    setSelectedWallet: (selectedWalletId, selectedWalletType) => set({ selectedWalletId, selectedWalletType }),
+    clearSelectedWallet: () => set({ selectedWalletId: undefined, selectedWalletType: undefined }),
+});

package/dist/provider/stores/types.d.ts

@@ -0,0 +1,16 @@
+import ParaWeb, { WalletType } from '@getpara/web-sdk';
+export interface ClientSlice {
+    client?: ParaWeb;
+    setClient: (_: ParaWeb) => void;
+}
+export interface ModalSlice {
+    isOpen: boolean;
+    setIsOpen: (_: boolean) => void;
+}
+export interface WalletSlice {
+    selectedWalletId?: string;
+    selectedWalletType?: WalletType;
+    setSelectedWallet: (_?: string, __?: WalletType) => void;
+    clearSelectedWallet: () => void;
+}
+export type Store = ClientSlice & ModalSlice & WalletSlice;

package/dist/provider/stores/types.js

@@ -0,0 +1 @@
+export {};

package/dist/provider/stores/useStore.d.ts

@@ -0,0 +1,12 @@
+import { Store } from './types.js';
+export declare const useStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<Store>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<Store, Pick<Store, "selectedWalletId" | "selectedWalletType">>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: Store) => void) => () => void;
+        onFinishHydration: (fn: (state: Store) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<Store, Pick<Store, "selectedWalletId" | "selectedWalletType">>>;
+    };
+}>;

package/dist/provider/stores/useStore.js

@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+import { createClientSlice, createModalSlice, createWalletSlice } from './slices/index.js';
+import { createJSONStorage, persist } from 'zustand/middleware';
+export const useStore = create()(persist((...a) => (Object.assign(Object.assign(Object.assign({}, createClientSlice(...a)), createModalSlice(...a)), createWalletSlice(...a))), {
+    version: 1,
+    name: '@PARA/web-state',
+    storage: createJSONStorage(() => sessionStorage),
+    partialize: state => ({
+        selectedWalletId: state.selectedWalletId,
+        selectedWalletType: state.selectedWalletType,
+    }),
+}));

package/dist/provider/types/provider.d.ts

@@ -0,0 +1,26 @@
+import { AccountCreationEvent, AccountSetupEvent, ConstructorOpts, Environment, ExternalWalletChangeEvent, LoginEvent, LogoutEvent, PregenWalletClaimedEvent, SignMessageEvent, SignTransactionEvent, WalletCreatedEvent, WalletsChangeEvent } from '@getpara/web-sdk';
+import { PropsWithChildren } from 'react';
+export type Callbacks = {
+    onLogout?: (event: LogoutEvent) => void;
+    onLogin?: (event: LoginEvent) => void;
+    onAccountSetup?: (event: AccountSetupEvent) => void;
+    onAccountCreation?: (event: AccountCreationEvent) => void;
+    onSignMessage?: (event: SignMessageEvent) => void;
+    onSignTransaction?: (event: SignTransactionEvent) => void;
+    onExternalWalletChange?: (event: ExternalWalletChangeEvent) => void;
+    onWalletsChange?: (event: WalletsChangeEvent) => void;
+    onWalletCreated?: (event: WalletCreatedEvent) => void;
+    onPregenWalletClaimed?: (event: PregenWalletClaimedEvent) => void;
+};
+export type ParaProviderConfig = {
+    disableAutoSessionKeepAlive?: boolean;
+};
+export interface ParaProviderProps extends PropsWithChildren {
+    paraClientConfig: {
+        env: Environment;
+        apiKey: string;
+        opts?: ConstructorOpts;
+    };
+    callbacks?: Callbacks;
+    config?: ParaProviderConfig;
+}

package/dist/provider/types/provider.js

@@ -0,0 +1 @@
+export {};

package/dist/provider/types/query.d.ts

@@ -0,0 +1,3 @@
+import { UseMutationResult } from '@tanstack/react-query';
+import { Compute, UnionStrictOmit } from './utils.js';
+export type UseMutationReturnType<data = unknown, error = Error, variables = void, context = unknown> = Compute<UnionStrictOmit<UseMutationResult<data, error, variables, context>, 'mutate' | 'mutateAsync'>>;

package/dist/provider/types/query.js

@@ -0,0 +1 @@
+export {};

package/dist/provider/types/utils.d.ts

@@ -0,0 +1,6 @@
+export type Compute<type> = {
+    [key in keyof type]: type[key];
+} & unknown;
+/** Strict version of built-in Omit type */
+export type StrictOmit<type, keys extends keyof type> = Pick<type, Exclude<keyof type, keys>>;
+export type UnionStrictOmit<type, keys extends keyof type> = type extends any ? StrictOmit<type, keys> : never;

package/dist/provider/types/utils.js

@@ -0,0 +1 @@
+export {};

package/dist/provider/utils/renameMutations.d.ts

@@ -0,0 +1,2 @@
+import { DefaultError, UseMutationResult } from '@tanstack/react-query';
+export declare function renameMutations<TResp = unknown, TData = unknown, TError = DefaultError, TVariables = void, TContext = unknown>(mutationObj: UseMutationResult<TData, TError, TVariables, TContext>, name: string): TResp;

package/dist/provider/utils/renameMutations.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+export function renameMutations(mutationObj, name) {
+    const { mutate: _, mutateAsync: __ } = mutationObj, mutationNoMutate = __rest(mutationObj, ["mutate", "mutateAsync"]);
+    const newMutations = {
+        [name]: mutationObj.mutate,
+        [`${name}Async`]: mutationObj.mutateAsync,
+    };
+    return Object.assign(Object.assign({}, newMutations), mutationNoMutate);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpara/react-sdk",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,9 +12,10 @@
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-common": "0.1.0",
-    "@getpara/react-components": "0.1.0",
-    "@getpara/web-sdk": "0.1.0",
+    "@getpara/react-common": "0.2.1",
+    "@getpara/react-components": "0.2.0",
+    "@getpara/web-sdk": "0.2.1",
+    "@tanstack/react-query": "^5.0.0",
     "date-fns": "^3.6.0",
     "detect-browser": "^5.3.0",
     "framer-motion": "11.3.28",
@@ -47,5 +48,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "625aaa94001a5461dcde8d6775c3b73f3862c76c"
+  "gitHead": "dd8c9463981f7dd563f6c925c370c7054ca74adf"
 }