@provablehq/aleo-wallet-adaptor-react-ui 0.1.1-alpha.0

package/README.md

@@ -0,0 +1,43 @@
+# @provablehq/aleo-wallet-adaptor-react-ui
+
+Drop-in React components—modals, buttons, icons—for projects that use the Aleo wallet adaptor provider.
+
+## When to use it
+
+- You already integrate `@provablehq/aleo-wallet-adaptor-react` and want production-ready UI elements.
+- You need a wallet picker modal that adapts to installed/loadable wallets automatically.
+- You prefer to customise styling via CSS variables rather than building UI from scratch.
+
+## Installation
+
+```bash
+pnpm add @provablehq/aleo-wallet-adaptor-react-ui
+```
+
+Include the distributed stylesheet once in your bundle:
+
+```tsx
+import '@provablehq/aleo-wallet-adaptor-react-ui/dist/styles.css';
+```
+
+## Usage
+
+```tsx
+import { WalletModalProvider, WalletMultiButton } from '@provablehq/aleo-wallet-adaptor-react-ui';
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <WalletModalProvider>
+      <WalletMultiButton />
+      {children}
+    </WalletModalProvider>
+  );
+}
+```
+
+## Related packages
+
+- `@provablehq/aleo-wallet-adaptor-react` – required provider context for these components.
+- Wallet adapters such as `@provablehq/aleo-wallet-adaptor-prove-alpha`, `-puzzle`, `-leo`, etc.
+
+Live demo: https://aleo-dev-toolkit-react-app.vercel.app/

package/dist/index.d.mts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { PropsWithChildren, ReactElement, MouseEvent, CSSProperties, FC, ReactNode, DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+import { Network } from '@provablehq/aleo-types';
+import { Wallet } from '@provablehq/aleo-wallet-adaptor-react';
+
+interface WalletModalContextState {
+    visible: boolean;
+    setVisible: (open: boolean) => void;
+}
+declare const WalletModalContext: react.Context<WalletModalContextState>;
+declare function useWalletModal(): WalletModalContextState;
+
+type ButtonProps = PropsWithChildren<{
+    className?: string;
+    disabled?: boolean;
+    network?: Network;
+    endIcon?: ReactElement;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    startIcon?: ReactElement;
+    style?: CSSProperties;
+    tabIndex?: number;
+}>;
+
+declare const WalletConnectButton: FC<ButtonProps>;
+
+interface WalletModalProps {
+    className?: string;
+    container?: string;
+    network?: Network;
+}
+declare const WalletModal: FC<WalletModalProps>;
+
+declare const WalletModalButton: FC<ButtonProps>;
+
+interface WalletModalProviderProps extends WalletModalProps {
+    children: ReactNode;
+}
+declare const WalletModalProvider: FC<WalletModalProviderProps>;
+
+declare const WalletDisconnectButton: FC<ButtonProps>;
+
+interface WalletIconProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+    wallet: Wallet | null;
+}
+declare const WalletIcon: FC<WalletIconProps>;
+
+declare const WalletMultiButton: FC<ButtonProps>;
+
+export { WalletConnectButton, WalletDisconnectButton, WalletIcon, type WalletIconProps, WalletModal, WalletModalButton, WalletModalContext, type WalletModalContextState, type WalletModalProps, WalletModalProvider, type WalletModalProviderProps, WalletMultiButton, useWalletModal };

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { PropsWithChildren, ReactElement, MouseEvent, CSSProperties, FC, ReactNode, DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+import { Network } from '@provablehq/aleo-types';
+import { Wallet } from '@provablehq/aleo-wallet-adaptor-react';
+
+interface WalletModalContextState {
+    visible: boolean;
+    setVisible: (open: boolean) => void;
+}
+declare const WalletModalContext: react.Context<WalletModalContextState>;
+declare function useWalletModal(): WalletModalContextState;
+
+type ButtonProps = PropsWithChildren<{
+    className?: string;
+    disabled?: boolean;
+    network?: Network;
+    endIcon?: ReactElement;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    startIcon?: ReactElement;
+    style?: CSSProperties;
+    tabIndex?: number;
+}>;
+
+declare const WalletConnectButton: FC<ButtonProps>;
+
+interface WalletModalProps {
+    className?: string;
+    container?: string;
+    network?: Network;
+}
+declare const WalletModal: FC<WalletModalProps>;
+
+declare const WalletModalButton: FC<ButtonProps>;
+
+interface WalletModalProviderProps extends WalletModalProps {
+    children: ReactNode;
+}
+declare const WalletModalProvider: FC<WalletModalProviderProps>;
+
+declare const WalletDisconnectButton: FC<ButtonProps>;
+
+interface WalletIconProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+    wallet: Wallet | null;
+}
+declare const WalletIcon: FC<WalletIconProps>;
+
+declare const WalletMultiButton: FC<ButtonProps>;
+
+export { WalletConnectButton, WalletDisconnectButton, WalletIcon, type WalletIconProps, WalletModal, WalletModalButton, WalletModalContext, type WalletModalContextState, type WalletModalProps, WalletModalProvider, type WalletModalProviderProps, WalletMultiButton, useWalletModal };