@use-glyph/sdk-react 0.0.1

package/dist/types/context/GlyphViewContext.d.ts

@@ -0,0 +1,12 @@
+import { WalletView, WalletMainViewTab } from '../lib/constants';
+import { GlyphViewType } from '../types';
+interface GlyphViewContextType {
+    glyphView: GlyphViewType;
+    setGlyphView: React.Dispatch<React.SetStateAction<GlyphViewType>>;
+    walletView: WalletView;
+    setWalletView: React.Dispatch<React.SetStateAction<WalletView>>;
+    walletMainViewTab: WalletMainViewTab;
+    setWalletMainViewTab: React.Dispatch<React.SetStateAction<WalletMainViewTab>>;
+}
+export declare const GlyphViewContext: import('react').Context<GlyphViewContextType | undefined>;
+export {};

package/dist/types/context/GlyphViewProvider.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare const GlyphViewProvider: React.FC<{
+    children: ReactNode;
+}>;

package/dist/types/context/strategies/EIP1193Strategy.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { GlyphProviderOptions } from '../../types';
+declare const EIP1193Strategy: FC<GlyphProviderOptions>;
+export default EIP1193Strategy;

package/dist/types/context/strategies/LoadingStrategy.d.ts

@@ -0,0 +1,5 @@
+import { default as React, FC } from 'react';
+declare const LoadingStrategy: FC<{
+    children: React.ReactNode;
+}>;
+export default LoadingStrategy;

package/dist/types/context/strategies/PrivyStrategy.d.ts

@@ -0,0 +1,3 @@
+import { GlyphProviderOptions } from '../../types';
+declare const _default: import('react').NamedExoticComponent<GlyphProviderOptions>;
+export default _default;

package/dist/types/hooks/useActivity.d.ts

@@ -0,0 +1,30 @@
+export type ActivityBlockExplorerItem = {
+    url: string;
+    text: string;
+};
+export type ActivityItem = {
+    id: string;
+    type: "fund" | "send";
+    type_text: string;
+    status: string;
+    status_text: string | null;
+    status_color: string;
+    symbol: string;
+    value: string;
+    amount: string;
+    amount_currency: string;
+    allowIdCopy: boolean;
+    blockExplorerTxns?: ActivityBlockExplorerItem[];
+};
+export type ActivityGroup = {
+    label: string;
+    transactions: ActivityItem[];
+};
+export declare function useActivity(pageSize?: number): {
+    transactionGroups: ActivityGroup[];
+    fetchTransactions: (reset?: boolean) => Promise<ActivityGroup[] | null>;
+    loadMore: () => Promise<boolean>;
+    reset: () => Promise<void>;
+    hasMore: boolean;
+    isLoading: boolean;
+};

package/dist/types/hooks/useBalances.d.ts

@@ -0,0 +1,4 @@
+export declare function useBalances(): {
+    balances: import('../types').GlyphWidgetBalances | null;
+    refreshBalances: (force?: boolean, cbs?: Record<string, (diffAmount: number) => void>) => Promise<void>;
+};

package/dist/types/hooks/useGlyph.d.ts

@@ -0,0 +1,49 @@
+import { UnsignedTransactionRequest } from '@privy-io/react-auth';
+import { Hex } from 'viem';
+import { GlyphWidgetBalances, GlyphWidgetUser } from '../types';
+export interface GlyphInterface {
+    /**
+     * Check whether the `GlyphContext` is ready to be used. You should wait for this to
+     * be true before using values such as `authenticated` and `user`.
+     */
+    ready: boolean;
+    /**
+     * True if the user is authenticated, false otherwise.
+     *
+     * You should always check that `ready` is true before using this value. Otherwise,
+     * the value may outdated while the Glyph context finishes its initialization.
+     */
+    authenticated: boolean;
+    /**
+     * Whether to hide the Glyph Widget.
+     */
+    hideWidget?: boolean;
+    symbol: string;
+    signMessage: (params: {
+        message: string;
+    }) => Promise<unknown>;
+    sendTransaction: (params: {
+        transaction: Omit<UnsignedTransactionRequest, "chainId">;
+    }) => Promise<string | {
+        hash: Hex;
+    }>;
+    login: () => void;
+    logout: () => void;
+    /**
+     * The base URL for the Glyph Widget API (optional, uses default if not provided)
+     */
+    glyphUrl?: string;
+}
+export interface GlyphHook extends GlyphInterface {
+    /**
+     * The user object, or null if the user is not authenticated.
+     */
+    user: GlyphWidgetUser | null;
+    refreshUser: (force?: boolean) => Promise<void>;
+    /**
+     * The balances object, or null if the user is not authenticated.
+     */
+    balances: GlyphWidgetBalances | null;
+    refreshBalances: (force?: boolean, cbs?: Record<string, (diffAmount: number) => void>) => Promise<void>;
+}
+export declare const useGlyph: () => GlyphHook;

package/dist/types/hooks/useGlyphApi.d.ts

@@ -0,0 +1,3 @@
+export declare function useGlyphApi(): {
+    glyphApiFetch: import('../context/GlyphContext').GlyphApiFetch | null;
+};

package/dist/types/hooks/useGlyphFunding.d.ts

@@ -0,0 +1,17 @@
+import { FUND_STATUS_API, FundQuoteDTO } from './useGlyphFundingApi';
+type INITIAL_FUND_STATUS = "STARTED";
+export type GLYPH_FUND_STATUS = INITIAL_FUND_STATUS | FUND_STATUS_API;
+export declare function useGlyphFunding(): {
+    fundAmount: string;
+    fundAmountError: string | null;
+    fundDone: boolean;
+    fundError: string | null;
+    fundInProgress: boolean;
+    fundQuote: FundQuoteDTO | null;
+    fundStatus: GLYPH_FUND_STATUS;
+    isOnrampEnabled: boolean;
+    quoteLoading: boolean;
+    doFunding: (onSuccess: () => void, onError: (error: string) => void) => Promise<void>;
+    setFundAmount: (val: React.SetStateAction<string>) => void;
+};
+export {};

package/dist/types/hooks/useGlyphFundingApi.d.ts

@@ -0,0 +1,45 @@
+export type FUND_STATUS_API = "WAITING" | "IN_PROGRESS" | "SUCCESS" | "FAILED";
+export type FundQuoteDTO = {
+    id: string;
+    in_amount: number;
+    estimated_fees_amount: number;
+    currency: string;
+    out_tokens_amount: number;
+    ape_to_currency: number;
+    deposit_address: string;
+    refresh_in_seconds: number;
+    error?: string;
+};
+export type FundQuoteStatusOk = {
+    ok: true;
+    status: FUND_STATUS_API;
+    details: string;
+};
+export type FundQuoteStatusError = {
+    ok: false;
+    status: null;
+    details?: string;
+};
+export type FundQuoteStatus = FundQuoteStatusOk | FundQuoteStatusError;
+export declare function useGlyphFundingApi(): {
+    getPaymentLink: (quote: FundQuoteDTO) => Promise<{
+        url: any;
+        ok: boolean;
+        error: any;
+    } | {
+        url: null;
+        ok: boolean;
+        error?: undefined;
+    }>;
+    createQuote: (address: string, amount: string, currency: string, country: string, subdivision?: string, takeLatest?: boolean) => Promise<{
+        quote: FundQuoteDTO | null;
+        ok: boolean;
+        error: string | undefined;
+    }>;
+    getQuoteStatus: (quote: FundQuoteDTO) => Promise<FundQuoteStatus>;
+    refreshQuote: (quote_id: string, amount: string) => Promise<{
+        quote: FundQuoteDTO | null;
+        ok: boolean;
+        error: string | undefined;
+    }>;
+};

package/dist/types/hooks/useGlyphView.d.ts

@@ -0,0 +1,3 @@
+export declare const useGlyphView: () => {
+    setGlyphView: import('react').Dispatch<import('react').SetStateAction<import('..').GlyphView>>;
+};

package/dist/types/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+declare const useMediaQuery: (query: string) => boolean;
+export default useMediaQuery;

package/dist/types/hooks/useNativeGlyphConnection.d.ts

@@ -0,0 +1,11 @@
+interface GlyphLogin {
+    login: () => void;
+    logout: () => void;
+}
+/**
+ * Use the `useNativeGlyphConnection` hook to login with Glyph.
+ * @param askForSignature - Whether to ask for a signature from the user. Pass true if you want to use the Glyph Widget or want the useGlyph hook to be ready for use. Defaults to true.
+ * @returns The login and logout functions.
+ */
+export declare const useNativeGlyphConnection: (askForSignature?: boolean) => GlyphLogin;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,20 @@
+import { default as GlyphWidget } from './components/GlyphWidget';
+import { default as LoginButton } from './components/LoginButton';
+import { default as LogoutButton } from './components/LogoutButton';
+import { default as SignUpButton } from './components/SignUpButton';
+import { default as GlyphProvider } from './context/GlyphProvider';
+export { useBalances } from './hooks/useBalances';
+export { useGlyph } from './hooks/useGlyph';
+export { useGlyphFunding, type GLYPH_FUND_STATUS } from './hooks/useGlyphFunding';
+export { useGlyphView } from './hooks/useGlyphView';
+export { glyphConnectorDetails } from './lib/constants';
+export { GlyphViewType as GlyphView, StrategyType } from './types';
+export { GlyphProvider, GlyphWidget, LoginButton, LogoutButton, SignUpButton };
+export { GlyphWalletProvider } from './lib/eip1193/GlyphWalletProvider';
+export { glyphWalletConnector } from './lib/eip1193/glyphWalletConnector';
+export { glyphWalletRK, glyphWalletRKStaging } from './lib/eip1193/glyphWalletRK';
+export { useNativeGlyphConnection } from './hooks/useNativeGlyphConnection';
+export { GLYPH_ICON_URL, GLYPH_PRIVY_APP_ID, STAGING_GLYPH_PRIVY_APP_ID } from './lib/constants';
+export { GLYPH_APP_LOGIN_METHOD, GlyphPrivyProvider, STAGING_GLYPH_APP_LOGIN_METHOD } from './lib/privy/GlyphPrivyProvider';
+export { InjectWagmiConnector } from './lib/privy/InjectWagmiConnector';
+export { usePrivyCrossAppProvider } from './lib/privy/usePrivyCrossAppProvider';

package/dist/types/lib/constants.d.ts

@@ -0,0 +1,45 @@
+export declare const DASHBOARD_BASE_URL: string;
+export declare const GLYPH_PRIVY_APP_ID: string;
+export declare const STAGING_GLYPH_PRIVY_APP_ID = "clxt9p8e601al6tgmsyhu7j3t";
+export declare const WIDGET_API_BASE_URL: string;
+export declare const GLYPH_ICON_URL = "https://i.ibb.co/TxcwPQyr/Group-12489-1.png";
+export declare const USER_REFRESH_INTERVAL_MS: number;
+export declare const TOKEN_REFRESH_INTERVAL_MS: number;
+export declare enum INTERNAL_GRADIENT_TYPE {
+    PRIMARY = "primary",
+    SUCCESS = "success",
+    ERROR = "error"
+}
+export declare enum WalletView {
+    MAIN = "main",
+    FUND = "fund",
+    SEND = "send",
+    RECEIVE = "receive",
+    PROFILE = "profile"
+}
+export declare enum WalletMainViewTab {
+    HOME = "home",
+    ACTIVITY = "activity",
+    TOKENS = "tokens",
+    LINKED_ACCOUNTS = "linked-accounts"
+}
+export declare enum FundView {
+    BUY = "fund-buy",
+    WAIT = "fund-wait",
+    END = "fund-end"
+}
+export declare enum SendView {
+    ENTER_ADDRESS = "send-enter-address",
+    ENTER_AMOUNT = "send-enter-amount",
+    WAIT = "send-wait",
+    END = "send-end"
+}
+export declare const TOKEN_LOGOS: Record<string, React.FC<React.SVGProps<SVGSVGElement>>>;
+export declare const glyphConnectorDetails: {
+    readonly id: "io.useglyph.privy";
+    readonly name: "Glyph";
+    readonly iconUrl: "https://i.ibb.co/TxcwPQyr/Group-12489-1.png";
+    readonly iconBackground: "#ffffff";
+    readonly shortName: "Glyph";
+    readonly type: "injected";
+};

package/dist/types/lib/eip1193/GlyphWalletProvider.d.ts

@@ -0,0 +1,40 @@
+import { QueryClient } from '@tanstack/react-query';
+import { default as React } from 'react';
+import { Chain, Transport } from 'viem';
+/**
+ * Configuration options for the GlyphWalletProvider.
+ * @interface GlyphWalletProviderProps
+ * @property {[Chain, ...Chain[]]} chains - The chains to use, defaults to apeChain.
+ * @property {Record<number, Transport>} transports - Optional transports to use, defaults to standard http.
+ * @property {QueryClient} queryClient - Optional query client to use, defaults to a standard query client.
+ * @property {React.ReactNode} children - The children to render.
+ */
+interface GlyphWalletProviderProps {
+    chains: [Chain, ...Chain[]];
+    transports?: Record<number, Transport>;
+    queryClient?: QueryClient;
+    children: React.ReactNode;
+    glyphUrl?: string;
+    useStagingTenant?: boolean;
+    ssr?: boolean;
+}
+/**
+ * GlyphWalletProvider is a React provider that wraps the WagmiProvider and QueryClientProvider.
+ * It provides the GlyphWalletContext to its children.
+ * @example
+ * ```tsx
+ * import { GlyphWalletProvider } from '@yuga-labs/glyph-sdk-react';
+ *
+ * const App = () => {
+ *   const queryClient = new QueryClient()
+ *   return (
+ *     <GlyphWalletProvider chains={[apeChain]} queryClient={queryClient}>
+ *       <Component {...pageProps} />
+ *     </GlyphWalletProvider>
+ *   );
+ * };
+ * ```
+ * @param {GlyphWalletConfig} config - The configuration for the GlyphWalletProvider.
+ */
+export declare const GlyphWalletProvider: ({ chains, transports, queryClient, children, glyphUrl, useStagingTenant, ssr }: GlyphWalletProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/lib/eip1193/glyphWalletConnector.d.ts

@@ -0,0 +1,35 @@
+import { EIP1193EventMap, EIP1193RequestFn, EIP1474Methods } from 'viem';
+import { WalletDetailsParams } from '@rainbow-me/rainbowkit';
+import { CreateConnectorFn } from 'wagmi';
+interface GlyphWalletConnectorOptions {
+    /** RainbowKit connector details */
+    rkDetails: WalletDetailsParams;
+    /** Optional custom paymaster handler */
+    useStagingTenant?: boolean;
+}
+/**
+ * Create a wagmi connector for the Glyph Global Wallet.
+ *
+ * Adapted from wagmi injected connector as a reference implementation:
+ * https://github.com/wevm/wagmi/blob/main/packages/core/src/connectors/injected.ts#L94
+ *
+ * @example
+ * import { createConfig, http } from "wagmi";
+ * import { apeChain } from "wagmi/chains";
+ * import { glyphWalletConnector } from "@yuga-labs/glyph-sdk-react"
+ *
+ * export const wagmiConfig = createConfig({
+ *   chains: [apeChain],
+ *   transports: {
+ *     [apeChain.id]: http(),
+ *   },
+ *   connectors: [glyphWalletConnector()],
+ *   ssr: true,
+ * });
+ */
+declare function glyphWalletConnector(options?: Partial<GlyphWalletConnectorOptions>): CreateConnectorFn<{
+    on: <event extends keyof EIP1193EventMap>(event: event, listener: EIP1193EventMap[event]) => void;
+    removeListener: <event extends keyof EIP1193EventMap>(event: event, listener: EIP1193EventMap[event]) => void;
+    request: EIP1193RequestFn<EIP1474Methods>;
+}, Record<string, unknown>, Record<string, unknown>>;
+export { glyphWalletConnector };

package/dist/types/lib/eip1193/glyphWalletRK.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Create a RainbowKit wallet for Glyph Global Wallet
+ *
+ * @example
+ * import { connectorsForWallets } from "@rainbow-me/rainbowkit";
+ * import { glyphWalletRK } from "@yuga-labs/glyph-sdk-react"
+ *
+ * const connectors = connectorsForWallets(
+ *  [
+ *    {
+ *      groupName: "Glyph",
+ *      wallets: [glyphWalletRK],
+ *    },
+ *  ]);
+ */
+declare const glyphWalletRK: () => import('@rainbow-me/rainbowkit').Wallet;
+declare const glyphWalletRKStaging: () => import('@rainbow-me/rainbowkit').Wallet;
+export { glyphWalletRK, glyphWalletRKStaging };

package/dist/types/lib/intl.d.ts

@@ -0,0 +1,2 @@
+export declare const formatCurrency: (amount?: number | string, currency?: string | null) => string;
+export declare const currencyToSymbol: (currency?: string) => string;

package/dist/types/lib/numericInputs.d.ts

@@ -0,0 +1,2 @@
+export declare function limitDecimals(value: string, separator: string, maxDecimals: number): string;
+export declare function formatInputNumber(value: string, maxDecimals: number): string;

package/dist/types/lib/popup.d.ts

@@ -0,0 +1,11 @@
+type OpenPopupProps = {
+    url: string;
+    height: number;
+    width: number;
+    target?: string;
+};
+/**
+ * Open a popup in the center of the screen with the specified size.
+ */
+export declare function openPopup({ url, target, height, width }: OpenPopupProps): void;
+export {};

package/dist/types/lib/privy/GlyphPrivyProvider.d.ts

@@ -0,0 +1,25 @@
+import { LoginMethodOrderOption, PrivyProviderProps } from '@privy-io/react-auth';
+import { QueryClient } from '@tanstack/react-query';
+import { Chain, Transport } from 'viem';
+import { default as React } from 'react';
+export declare const GLYPH_APP_LOGIN_METHOD: LoginMethodOrderOption;
+export declare const STAGING_GLYPH_APP_LOGIN_METHOD: LoginMethodOrderOption;
+/**
+ * Configuration options for the GlyphPrivyProvider.
+ * @interface GlyphPrivyProviderProps
+ * @extends PrivyProviderProps
+ * @property {[Chain, ...Chain[]]} chains - The chains to use, defaults to apeChain.
+ * @property {Record<number, Transport>} transports - Optional transports to use, defaults to standard http.
+ * @property {QueryClient} queryClient - Optional query client to use, defaults to a standard query client.
+ * @property {boolean} ssr - Optional ssr to use, defaults to true.
+ */
+interface GlyphPrivyProviderProps extends PrivyProviderProps {
+    chains: [Chain, ...Chain[]];
+    transports?: Record<number, Transport>;
+    queryClient?: QueryClient;
+    glyphUrl?: string;
+    useStagingTenant?: boolean;
+    ssr?: boolean;
+}
+export declare const GlyphPrivyProvider: React.MemoExoticComponent<({ chains, transports, queryClient, glyphUrl, useStagingTenant, ssr, ...props }: GlyphPrivyProviderProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/types/lib/privy/InjectWagmiConnector.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export declare const InjectWagmiConnector: ({ children, useStagingTenant }: {
+    children: React.ReactNode;
+    useStagingTenant?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/privy/usePrivyCrossAppProvider.d.ts

@@ -0,0 +1,15 @@
+import { Chain, EIP1193RequestFn, EIP1474Methods } from 'viem';
+interface UsePrivyCrossAppEIP1193Props {
+    chains: readonly Chain[];
+    useStagingTenant?: boolean;
+}
+export declare const usePrivyCrossAppProvider: ({ chains, useStagingTenant }: UsePrivyCrossAppEIP1193Props) => {
+    ready: boolean | null;
+    provider: {
+        on: <event extends keyof import('viem').EIP1193EventMap>(event: event, listener: import('viem').EIP1193EventMap[event]) => void;
+        removeListener: <event extends keyof import('viem').EIP1193EventMap>(event: event, listener: import('viem').EIP1193EventMap[event]) => void;
+        request: EIP1193RequestFn<EIP1474Methods>;
+    };
+    chainId: number;
+};
+export {};