@bluxcc/react 0.1.0 → 0.1.2

package/LICENSE

@@ -0,0 +1,80 @@
+Business Source License 1.1
+
+License text copyright (c) 2025 Blux Team, All Rights Reserved.
+"Business Source License" is a trademark of MariaDB Corporation Ab.
+
+-----------------------------------------------------------------------------
+
+Parameters
+
+Licensor: Blux Team
+
+Licensed Work: Blux Kit
+The Licensed Work is (c) 2025 Blux Team
+
+Additional Use Grant: None
+
+Change Date: The earlier of 2028-02-05 or a date specified by the Licensor.
+
+Change License: GNU Affero General Public License v3.0 (AGPL-3.0)
+
+-----------------------------------------------------------------------------
+
+Terms
+
+1. Grant of Rights
+The Licensor grants you the right to modify, create derivative works, and contribute changes to the Licensed Work through official channels (e.g., pull requests).
+
+2. Copying and Redistribution Restriction
+You may not copy, redistribute, or publicly share the Licensed Work in any form. The Licensed Work may only be used within the scope of contribution to the official repository.
+
+3. Production Use Restriction
+Production use is strictly prohibited before the Change Date.
+For the purposes of this License, "Production Use" means any deployment of the Licensed Work that:
+- Provides services to third parties (commercial or non-commercial).
+- Generates revenue, directly or indirectly.
+- Supports business operations in any capacity, including internal use.
+
+If you wish to use the Licensed Work in production before the Change Date, you must obtain a commercial license from the Licensor at support@blux.cc.
+
+4. Derivative Works and Contributions
+- You may not modify or remove references to "Blux Team" in any derivative works, copies, or modified versions of the Licensed Work.
+- Any modifications must be submitted as pull requests to the official repository.
+
+5. Change License and Change Date
+- On the Change Date, or the fourth anniversary of a specific version’s first public distribution, whichever comes first, this License terminates, and the Licensed Work will be available under the Change License (AGPL-3.0).
+- Only the latest version of the Licensed Work at the Change Date will be subject to AGPL-3.0.
+- The Licensor reserves the right to extend the Change Date for future versions of the Licensed Work.
+
+6. License Compliance and Enforcement
+- If your use of the Licensed Work does not comply with the requirements of this License, your rights to use all versions of the Licensed Work terminate immediately.
+- Violations may result in legal action, including but not limited to seeking injunctive relief and damages.
+
+7. Trademark and Branding
+- This License does not grant any rights to use the "Blux Team" name, logo, or trademarks, except where expressly required by this License.
+
+8. Warranty Disclaimer
+TO THE EXTENT PERMITTED BY APPLICABLE LAW, THE LICENSED WORK IS PROVIDED "AS IS" WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+MariaDB hereby grants you permission to use this License’s text to license
+your works, and to refer to it using the trademark "Business Source License",
+as long as you comply with the Covenants of Licensor below.
+
+-----------------------------------------------------------------------------
+
+Covenants of Licensor
+In consideration of the right to use this License’s text and the "Business
+Source License" name and trademark, Licensor covenants to MariaDB, and to all
+other recipients of the licensed work to be provided by Licensor:
+
+1. Use GNU Affero General Public License Version 3.0 (AGPL-3.0) or a later version as the Change License.
+2. Either specify an Additional Use Grant that does not impose additional restrictions, or insert "None".
+3. Specify a Change Date for each version.
+4. Provide commercial or special-use licenses upon request at support@blux.cc.
+5. Not modify this License in any way that conflicts with the above terms.
+
+-----------------------------------------------------------------------------
+
+Notice
+The Business Source License (this document, or the "License") is not an Open Source license. However, the Licensed Work will eventually be made available under an Open Source License, as stated in this License.
+

package/README.md

@@ -1 +1,101 @@
-# Blux
+# Blux Wallet Kit - The Missing Piece for Stellar dApps
+
+Blux is a **comprehensive authentication and wallet connect kit** designed for Stellar dApps. It simplifies onboarding by integrating multiple authentication methods, including **wallets, email, phone, and OAuth**. With Blux, developers can create seamless multi-auth experiences without the complexity of building custom authentication solutions from scratch.
+
+## Features
+
+- **Multi-Wallet Support**: Easily integrate Stellar wallets such as **Rabet, xBull, Lobstr, Freighter, and Albedo**.
+- **OAuth & Social Login** *(Coming Soon)*: Support for **Apple, Meta, Google, and more**.
+- **Email & Phone Authentication** *(Coming Soon)*: Securely onboard users with non-crypto credentials.
+- **Customizable UI**: Adjust themes, fonts, backgrounds, logos, cover images, corner radius, and text colors.
+- **Configurable Networks**: Set up and modify network preferences via API keys.
+- **Future-Proof**: More wallets and authentication methods will be added based on community feedback.
+
+## Installation
+
+Blux can be installed via npm:
+
+```sh
+npm i @bluxcc/react
+```
+
+or using yarn:
+
+```sh
+yarn add @bluxcc/react
+```
+
+## Usage
+
+Import Blux and set up the authentication flow:
+
+```tsx
+import { BluxProvider, useBlux } from "@bluxcc/react";
+
+const ConnectButton = () => {
+  const { connect } = useBlux();
+  return <button onClick={connect}>Connect Wallet</button>;
+};
+
+const App = () => {
+  return (
+    <BluxProvider config={{ appName: "YourApp", network: "testnet" }}>
+      <ConnectButton />
+    </BluxProvider>
+  );
+};
+
+export default App;
+```
+
+## Customization
+
+Developers can customize various UI elements:
+
+- **Themes & Fonts**
+- **Backgrounds, Logos, and Cover Images**
+- **Corner Radius & Text Colors**
+- **Authentication Limits** (Free tier supports 500-1000 accounts per auth method)
+
+Configuration options can be set via the `BluxProvider` config or environment variables.
+
+## Supported Wallets
+
+Currently supported connection methods:
+
+- [x] **Rabet**
+- [x] **xBull**
+- [x] **Lobstr**
+- [x] **Freighter**
+- [x] **Albedo**
+- [ ] **Ledger**
+- [ ] **Trezor**
+- [ ] **Hana**
+- [ ] **WalletConnect**
+- [ ] **OAuth**
+- [ ] **Email**
+- [ ] **Phone**
+
+## License & Usage Restrictions
+
+- **No Production Use Until 2028**: This software is provided under the **Blux Team License** with restrictions on production use.
+- **No Forking or Unauthorized Modifications**: Removing references to **Blux Team** or forking without attribution is strictly prohibited.
+- **Custom Licensing Available**: Contact us at [support@blux.cc](mailto:support@blux.cc) to discuss licensing options.
+
+## Support & Contact
+
+For support, licensing, or inquiries, reach out via:
+
+- **Email**: [support@blux.cc](mailto:support@blux.cc)
+- **X (Twitter)**: [@BluxOfficial](https://twitter.com/BluxOfficial)
+
+## Roadmap & Future Plans
+
+Blux is evolving. Follow our updates on [X (Twitter)](https://twitter.com/BluxOfficial) for:
+
+- **OAuth Authentication (Apple, Meta, Google, etc.)**
+- **Email & Phone-Based Authentication**
+- **More Wallet Integrations**
+- **Enhanced Customization & Security Features**
+
+Stay tuned. We have many exciting developments ahead!

package/dist/assets/Icons.d.ts

@@ -1,6 +1,17 @@
 import React from 'react';
-export declare const InfoIcon: () => React.JSX.Element;
+export declare const InfoIcon: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;
 export declare const ArrowRight: () => React.JSX.Element;
 export declare const ArrowLeft: () => React.JSX.Element;
 export declare const Close: () => React.JSX.Element;
 export declare const Loading: () => React.JSX.Element;
+export declare const GreenCheck: () => React.JSX.Element;
+export declare const LogOut: () => React.JSX.Element;
+export declare const Copy: () => React.JSX.Element;
+export declare const History: () => React.JSX.Element;
+export declare const Send: () => React.JSX.Element;
+export declare const ArrowDropUp: () => React.JSX.Element;
+export declare const RedAlert: () => React.JSX.Element;
+export declare const Upstream: () => React.JSX.Element;
+export declare const Globe: () => React.JSX.Element;

package/dist/assets/bluxLogo.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
-declare const BluxLogo: () => React.JSX.Element;
+declare const BluxLogo: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;
 export default BluxLogo;

package/dist/assets/logos.d.ts

@@ -4,4 +4,9 @@ export declare const RabetIcon: () => React.JSX.Element;
 export declare const FreighterIcon: () => React.JSX.Element;
 export declare const XBullIcon: () => React.JSX.Element;
 export declare const LobstrIcon: () => React.JSX.Element;
-export declare const StellarIcon: () => React.JSX.Element;
+export declare const StellarIcon: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;
+export declare const StellarSmallIcon: ({ fill }: {
+    fill?: string;
+}) => React.JSX.Element;

package/dist/chains.d.ts

@@ -0,0 +1,8 @@
+import { Networks } from "@stellar/stellar-sdk";
+export declare const chains: {
+    mainnet: Networks;
+    testnet: Networks;
+    sandbox: Networks;
+    futurenet: Networks;
+    standalone: Networks;
+};

package/dist/components/Button/buttonVariants.d.ts

@@ -4,6 +4,6 @@ interface IconButtonProps extends ButtonProps {
     icon: React.ReactNode;
     name: string;
 }
-export declare const ButtonWithIcon: React.FC<IconButtonProps>;
-export declare const ButtonWithIconAndArrow: React.FC<IconButtonProps>;
+export declare const ButtonWithIcon: ({ icon, name, ...props }: IconButtonProps) => React.JSX.Element;
+export declare const ButtonWithIconAndArrow: ({ icon, name, ...props }: IconButtonProps) => React.JSX.Element;
 export {};

package/dist/components/Button/index.d.ts

@@ -1,10 +1,17 @@
 import React from 'react';
-export type ButtonProps = {
-    name?: string;
+type ButtonSize = 'small' | 'medium' | 'large';
+type ButtonVariant = 'outline' | 'text' | 'fill';
+type ButtonState = 'enabled' | 'disabled' | 'selected';
+interface ButtonProps {
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    state?: ButtonState;
+    children: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
     onClick?: () => void;
-    children?: React.ReactNode;
+    style?: React.CSSProperties;
     className?: string;
-    disabled?: boolean;
-};
-declare const Button: ({ onClick, className, disabled, children }: ButtonProps) => React.JSX.Element;
+}
+declare const Button: ({ size, variant, state, children, startIcon, endIcon, onClick, style, className, }: ButtonProps) => React.JSX.Element;
 export default Button;

package/dist/components/CardItem/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type CardItemProps = {
+    variant?: 'social' | 'default';
+    startIcon: React.ReactNode;
+    endArrow?: boolean;
+    label: string;
+    onClick?: () => void;
+};
+declare const CardItem: React.FC<CardItemProps>;
+export default CardItem;

package/dist/components/Input/OTPInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const OTPInput: React.FC;
+export default OTPInput;

package/dist/components/Input/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+type InputFieldProps = {
+    label?: string;
+    placeholder?: string;
+    error?: boolean;
+    helperText?: string;
+    iconRight?: React.ReactNode;
+    iconLeft?: React.ReactNode;
+    button?: string | React.ReactNode;
+    onButtonClick?: () => void;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    customLabel?: React.ReactNode;
+};
+declare const InputField: ({ label, placeholder, error, helperText, iconRight, iconLeft, button, onButtonClick, customLabel, value, onChange, }: InputFieldProps) => React.JSX.Element;
+export default InputField;

package/dist/components/Modal/Header/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 interface HeaderProps {
-    icon: 'info' | 'back';
+    icon?: 'info' | 'back';
     onInfo?: () => void;
     onBack?: () => void;
-    modalHeader: string;
+    title: string;
     closeButton?: boolean;
     onClose: () => void;
 }
-declare const ModalHeader: React.FC<HeaderProps>;
+declare const ModalHeader: ({ icon, onInfo, onBack, title, closeButton, onClose, }: HeaderProps) => React.JSX.Element;
 export default ModalHeader;

package/dist/components/Modal/index.d.ts

@@ -1,15 +1,14 @@
 import React from 'react';
 interface ModalProps {
     isOpen: boolean;
-    className?: string;
     onClose?: () => void;
     onBack?: () => void;
     children: React.ReactNode;
-    icon: 'info' | 'back';
+    icon?: 'info' | 'back';
     onInfo?: () => void;
     closeButton?: boolean;
-    modalHeader: string;
+    title: string;
     initialHeight: number;
 }
-declare const Modal: ({ isOpen, onClose, onBack, onInfo, children, className, modalHeader, icon, initialHeight, closeButton, }: ModalProps) => React.JSX.Element | null;
+declare const Modal: ({ isOpen, onClose, onBack, onInfo, children, title, icon, initialHeight, closeButton, }: ModalProps) => React.JSX.Element | null;
 export default Modal;

package/dist/components/Transaction/History/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface TransactionProps {
+    amount: string;
+    date: string;
+    status: 'success' | 'failed' | string;
+    action: string;
+    hash: string;
+}
+declare const _default: React.MemoExoticComponent<({ amount, date, status, action, hash }: TransactionProps) => React.JSX.Element>;
+export default _default;

package/dist/components/Transaction/Summery/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SummaryProps {
+    operationsCount: number;
+    sender: string;
+    estimatedFee: string;
+    action: string;
+}
+declare const Summary: ({ operationsCount, sender, estimatedFee, action }: SummaryProps) => React.JSX.Element;
+export default Summary;

package/dist/constants/index.d.ts

@@ -1,5 +1,9 @@
 import { ModalHeights } from '../types';
+import { IAppearance } from '../types';
 export declare const MODAL_HEIGHTS: ModalHeights;
-export declare const MODAL_CONFIG: {
-    readonly defaultHeader: "Connect Wallet";
+export declare const HORIZON_SERVERS: {
+    public: string;
+    testnet: string;
+    futurenet: string;
 };
+export declare const defaultAppearance: IAppearance;

package/dist/containers/BluxModal/content.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Routes } from '../../types';
+interface ModalContentProps {
+    showAllWallets: boolean;
+    setShowAllWallets: (show: boolean) => void;
+}
+export declare const modalContent: Record<Routes, {
+    title: string;
+    Component: React.FC<ModalContentProps>;
+}>;
+export {};

package/dist/containers/BluxModal/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface BluxModalProps {
+    isOpen: boolean;
+    closeModal: () => void;
+}
+export default function BluxModal({ isOpen, closeModal }: BluxModalProps): React.JSX.Element;
+export {};

package/dist/containers/ConnectModal/content.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Routes } from '../../types';
+interface ModalContentProps {
+    showAllWallets: boolean;
+    setShowAllWallets: (show: boolean) => void;
+}
+export declare const modalContent: Record<Routes, {
+    title: string;
+    Component: React.FC<ModalContentProps>;
+}>;
+export {};

package/dist/containers/ConnectModal/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface ConnectModalProps {
     isOpen: boolean;
+    closeModal: () => void;
 }
-export default function ConnectModal({ isOpen }: ConnectModalProps): React.JSX.Element;
+export default function ConnectModal({ isOpen, closeModal }: ConnectModalProps): React.JSX.Element;
 export {};

package/dist/containers/Pages/Activity/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Activity: React.FC;
+export default Activity;

package/dist/containers/Pages/ConfirmCode/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ConfirmCode: () => React.JSX.Element;
+export default ConfirmCode;

package/dist/containers/Pages/OnBoarding/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type OnBoardingProps = {
+    showAllWallets: boolean;
+    setShowAllWallets: (value: boolean) => void;
+};
+declare const OnBoarding: ({ showAllWallets, setShowAllWallets }: OnBoardingProps) => React.JSX.Element;
+export default OnBoarding;

package/dist/containers/Pages/Profile/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Profile: () => React.JSX.Element;
+export default Profile;

package/dist/containers/Pages/Send/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Send: () => React.JSX.Element;
+export default Send;

package/dist/containers/Pages/SignTransaction/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SignTransaction: () => React.JSX.Element;
+export default SignTransaction;

package/dist/containers/Pages/Successful/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Successful: () => React.JSX.Element;
+export default Successful;

package/dist/containers/Pages/Waiting/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Waiting: () => React.JSX.Element;
+export default Waiting;

package/dist/context/provider.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ContextState, IProviderConfig, IAppearance } from '../types';
 export declare const ProviderContext: React.Context<ContextState | null>;
-export declare const defaultAppearance: IAppearance;
 export declare const BluxProvider: ({ config, isDemo, appearance, children, }: {
     isDemo?: boolean;
     appearance?: IAppearance;
     config: IProviderConfig;
     children: React.ReactNode;
 }) => React.JSX.Element;
+export declare const useProvider: () => ContextState;

package/dist/hooks/useAccount.d.ts

@@ -0,0 +1,12 @@
+import { AccountData } from '../types';
+interface AccountHookResult {
+    account: AccountData | null;
+    loading: boolean;
+    error: string | null;
+}
+interface AccountHookProps {
+    publicKey: string;
+    passphrase: string;
+}
+declare const useAccount: ({ publicKey, passphrase }: AccountHookProps) => AccountHookResult;
+export default useAccount;

package/dist/hooks/useBlux.d.ts

@@ -1,6 +1,8 @@
 export declare const useBlux: () => {
-    connect: () => Promise<void>;
-    disconnect: () => Promise<void>;
+    connect: () => void;
+    disconnect: () => void;
+    profile: () => void;
+    signTransaction: (xdr: string) => Promise<unknown>;
     isReady: boolean;
     user: import("../types").IUser;
     isAuthenticated: boolean;

package/dist/hooks/useGoogleFont.d.ts

@@ -1,5 +1,2 @@
 import { SupportedFonts } from '../types';
-export declare function useGoogleFonts(): {
-    selectedFont: SupportedFonts | null;
-    setSelectedFont: import("react").Dispatch<import("react").SetStateAction<SupportedFonts | null>>;
-};
+export declare function useGoogleFonts(): SupportedFonts;