@xdcs-protocol/ui-kit 1.0.1

package/dist/types/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/types/components/Header.d.ts

@@ -0,0 +1,2 @@
+declare const Header: () => import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/types/components/LeftPanel.d.ts

@@ -0,0 +1,10 @@
+export declare const boldSx: {
+    fontFamily: string;
+    fontWeight: number;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
+    mb: number;
+};
+declare const LeftPanel: () => import("react/jsx-runtime").JSX.Element;
+export default LeftPanel;

package/dist/types/components/MainLayout.d.ts

@@ -0,0 +1,2 @@
+declare const MainLayout: () => import("react/jsx-runtime").JSX.Element;
+export default MainLayout;

package/dist/types/components/Navbar.d.ts

@@ -0,0 +1,2 @@
+declare function Navbar(): import("react/jsx-runtime").JSX.Element;
+export default Navbar;

package/dist/types/components/NavbarMenu.d.ts

@@ -0,0 +1,2 @@
+declare const NavbarMenu: () => import("react/jsx-runtime").JSX.Element;
+export default NavbarMenu;

package/dist/types/components/RightPanel.d.ts

@@ -0,0 +1,2 @@
+declare const RightPanel: () => import("react/jsx-runtime").JSX.Element;
+export default RightPanel;

package/dist/types/components/StyledSlider.d.ts

@@ -0,0 +1,2 @@
+declare const StyledSlider: import("@emotion/styled").StyledComponent<import("@mui/material").SliderOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "components" | "disabled" | "className" | "style" | "classes" | "sx" | "track" | "defaultValue" | "tabIndex" | "color" | "aria-label" | "aria-labelledby" | "aria-valuetext" | "onChange" | "scale" | "size" | "name" | "value" | "slots" | "slotProps" | "orientation" | "max" | "min" | "componentsProps" | "disableSwap" | "getAriaLabel" | "getAriaValueText" | "marks" | "onChangeCommitted" | "shiftStep" | "step" | "valueLabelDisplay" | "valueLabelFormat"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export default StyledSlider;

package/dist/types/components/ThreeDots.d.ts

@@ -0,0 +1,2 @@
+declare const ThreeDotsMenu: () => import("react/jsx-runtime").JSX.Element;
+export default ThreeDotsMenu;

package/dist/types/components/ToggleTheme.d.ts

@@ -0,0 +1 @@
+export default function ThemeToggle(): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/WalletNavbar.d.ts

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

package/dist/types/components/XDCLiquidStaking.d.ts

@@ -0,0 +1,8 @@
+export declare const regularSx: {
+    fontFamily: string;
+    fontWeight: number;
+    fontStyle: string;
+    lineHeight: string;
+    letterSpacing: string;
+};
+export default function XDCLiquidStaking(): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/core/AddressFieldTools.d.ts

@@ -0,0 +1,18 @@
+export interface AddressFieldToolsProps {
+    address: string;
+    symbol?: string;
+    decimal?: number;
+    showAddress?: boolean;
+    showCopyButton?: boolean;
+    showInBlockExplorer?: boolean;
+    withBackground?: boolean;
+    isTransaction?: boolean;
+    showAddToWallet?: boolean;
+    shrinkAddress?: boolean;
+    chainId?: number;
+    onCopy?: (text: string) => void;
+    onOpenExplorer?: (url: string) => void;
+    onAddToWallet?: () => Promise<void> | void;
+}
+declare const AddressFieldTools: ({ address, showAddress, showCopyButton, showInBlockExplorer, withBackground, isTransaction, showAddToWallet, shrinkAddress, chainId, onCopy, onOpenExplorer, onAddToWallet, }: AddressFieldToolsProps) => import("react/jsx-runtime").JSX.Element;
+export default AddressFieldTools;

package/dist/types/components/store/useThemeStore.d.ts

@@ -0,0 +1,18 @@
+type ThemeMode = "light" | "dark";
+export interface ThemeStore {
+    mode: ThemeMode;
+    toggleMode: () => void;
+    setMode: (mode: ThemeMode) => void;
+}
+declare const useThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeStore, ThemeStore>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ThemeStore) => void) => () => void;
+        onFinishHydration: (fn: (state: ThemeStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeStore, ThemeStore>>;
+    };
+}>;
+export { useThemeStore };

package/dist/types/config/chains.d.ts

@@ -0,0 +1,7 @@
+export declare const CHAIN_CONFIG: Record<number, {
+    name: string;
+    logoLight: string;
+    logoDark: string;
+    explorer: string;
+    prefix?: string;
+}>;

package/dist/types/helpers/text.d.ts

@@ -0,0 +1,58 @@
+import { type Address } from "../types";
+export declare const ethToXdcAddress: (address: string) => string;
+export declare const xdcToEthAddress: (address: string) => string;
+export declare const MAX_FILE_SIZE: number;
+export declare const ACCEPTED_IMAGE_TYPES: string[];
+export declare const ellipsisShrinkStr: (str: string, start: number, end: number) => string;
+export declare const checksumAddress: (address: Address) => string;
+export declare const formatAddressShort: (address: Address) => string;
+/**
+ * Formats a floating-point number to a string with specified precision.
+ *
+ * @param n - The floating-point number to format.
+ * @param precision - The number of decimal places to include in the result (default is 5).
+ * @returns A string representation of the number with the specified precision.
+ *          If the number is effectively zero, returns '0' with specified precision.
+ *          Ensures a minimum of `precision` decimal places in the result.
+ */
+export declare const formatFloat: (n: number, precision?: number) => string;
+export declare const convertFromWei: (value: string) => string;
+/**
+ * Converts a number to a BigInt with scaling based on precision.
+ * @param number - The input number to convert.
+ * @param precision - The number of decimal places to scale by (default is 2).
+ * @returns The scaled BigInt representation of the number.
+ * @throws Error if the input is not a valid number.
+ */
+export declare function percentToBigInt(number: number, precision?: number): bigint;
+/**
+ * Converts a BigInt back to a number with the original scale.
+ * @param bigIntValue - The BigInt to convert back.
+ * @param precision - The number of decimal places to scale down by (default is 2).
+ * @returns The original number representation.
+ * @throws Error if the input is not a valid BigInt.
+ */
+export declare function bigIntToPercent(bigIntValue: bigint, precision?: number): number;
+/**
+ * Takes an array of objects and a key string, and returns a dictionary where the values of the key
+ * are the keys of the dictionary, and the values are the objects from the original array.
+ * @param array - The array of objects to convert.
+ * @param key - The key string to use as the dictionary key.
+ * @returns A dictionary with the specified key as the key and the objects as the values.
+ */
+export declare const arrayToDict: (array: any[], key: string) => any;
+/**
+ * Takes an array of objects and a key string, and returns a dictionary where the values of the key
+ * within the `token` object are the keys of the dictionary, and the values are the objects from the
+ * original array.
+ * @param array - The array of objects to convert.
+ * @param key - The key string to use as the dictionary key within the `token` object.
+ * @returns A dictionary with the specified key as the key and the objects as the values.
+ */
+export declare const arrayToDictForToken: (array: any[], key: string) => any;
+/**
+ * Converts a Date object to a Unix timestamp in seconds.
+ * @param date - The date object to convert.
+ * @returns The Unix timestamp in seconds.
+ */
+export declare const toEpoch: (date: any) => number;

package/dist/types/hooks/store/useMockAppStore.d.ts

@@ -0,0 +1,2 @@
+import type { WalletStoreState } from "../../types/WalletStore";
+export declare const useMockAppWalletStore: import("zustand").UseBoundStore<import("zustand").StoreApi<WalletStoreState>>;

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

@@ -0,0 +1,4 @@
+import type { UseBoundStore, StoreApi } from "zustand";
+import type { WalletStoreState } from "../types/WalletStore";
+export declare const WalletStoreContext: import("react").Context<UseBoundStore<StoreApi<WalletStoreState>> | undefined>;
+export declare const useWalletStore: <T>(selector: (state: WalletStoreState) => T) => T;

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+import LeftPanel from "./components/LeftPanel";
+import MainLayout from "./components/MainLayout";
+export { LeftPanel };
+export { getTheme } from "./theme";
+export { MainLayout as ValidProtocolLayout };
+export { useThemeStore } from "./components/store/useThemeStore";
+export type { WalletStoreState } from "./types/WalletStore";
+export { WalletStoreContext, useWalletStore } from "./hooks/useWalletContext";

package/dist/types/main.d.ts

@@ -0,0 +1 @@
+import "./index.css";

package/dist/types/stories/Button.d.ts

@@ -0,0 +1,15 @@
+import "./button.css";
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: "small" | "medium" | "large";
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/stories/Button.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+    };
+    args: {
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/dist/types/stories/Header.d.ts

@@ -0,0 +1,12 @@
+import "./header.css";
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/stories/Header.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ user, onLogin, onLogout, onCreateAccount, }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/types/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import "./page.css";
+export declare const Page: React.FC;

package/dist/types/stories/Page.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/types/theme.d.ts

@@ -0,0 +1,2 @@
+import type { PaletteMode } from "@mui/material";
+export declare const getTheme: (mode: PaletteMode) => import("@mui/material").Theme;

package/dist/types/types/WalletStore.d.ts

@@ -0,0 +1,28 @@
+export interface WalletStoreState {
+    account: string;
+    balance: number;
+    wallet: any;
+    logoUrl: string;
+    liquidStakingUrl?: string;
+    nativeStakingUrl?: string;
+    anchorStakingUrl?: string;
+    privateStakingUrl?: string;
+    prfiLiquidStakingUrl?: string;
+    bridgeUrl?: string;
+    masternodeDashboardUrl?: string;
+    defiDashboardUrl?: string;
+    docsUrl?: string;
+    isSupported: boolean;
+    onConnect: () => Promise<void>;
+    onDisconnect: () => Promise<void>;
+    setWalletData: (wallet: any, account: string, isSupported: boolean, balance?: number, logoUrl?: string) => void;
+    clearWalletData: () => void;
+    setBalance?: (balance: number) => void;
+    setAccount?: (account: string) => void;
+    menuItems: ThreeDotsMenuItem[];
+    setMenuItems: (items: ThreeDotsMenuItem[]) => void;
+}
+export interface ThreeDotsMenuItem {
+    title: string;
+    onClick: () => void;
+}

package/dist/types/types/index.d.ts

@@ -0,0 +1 @@
+export type Address = `0x${string}`;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@xdcs-protocol/ui-kit",
+  "version": "1.0.1",
+  "description": "Common React components library.",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./hooks/useWalletContext": {
+      "import": "./dist/hooks/useWalletContext.es.js",
+      "require": "./dist/hooks/useWalletContext.cjs.js",
+      "types": "./dist/types/hooks/useWalletContext.d.ts"
+    },
+    "./types/WalletStore": {
+      "types": "./dist/types/types/WalletStore.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --project tsconfig.build.json && vite build && cp -r temp/types dist/ && rm -rf temp",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/material": "^5.15.20",
+    "@web3-onboard/walletconnect": "^2.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.6.0",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.24.0",
+    "zustand": "^4.5.2",
+    "web3-utils": "^4.3.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@eslint/js": "^9.25.0",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/material": "^5.15.20",
+    "@storybook/addon-a11y": "^9.1.10",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-onboarding": "^9.1.10",
+    "@storybook/addon-vitest": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^9.1.10",
+    "globals": "^16.0.0",
+    "playwright": "^1.56.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.24.0",
+    "storybook": "^9.1.10",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5",
+    "vitest": "^3.2.4",
+    "web3-utils": "^4.3.1"
+  },
+  "dependencies": {}
+}