@rash2x/bridge-widget 0.2.3 → 0.2.11

package/README.md

@@ -47,24 +47,42 @@ npm install @tonconnect/ui-react @ton/core @ton/crypto @ton/ton
 npm install @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-adapters tronweb
 ```
 
+### Required shadcn/ui Components
+
+This library requires certain shadcn/ui components to be installed in your project. The library does **not bundle** these components to avoid duplication and allow you to use your own styled versions.
+
+**Required components:** `accordion`, `button`, `card`, `dialog`, `input`, `skeleton`, `switch`, `tooltip`
+
+Install them using shadcn CLI:
+
+```bash
+npx shadcn@latest add accordion button card dialog input skeleton switch tooltip
+```
+
+**Important:** Your project must have the following path aliases configured:
+
+- `@/components/ui` - for UI components
+- `@/lib/utils` - for the `cn` utility function
+
+For detailed setup instructions, see [SHADCN_COMPONENTS.md](./SHADCN_COMPONENTS.md).
+
 ## Quick Start
 
 ### 1. Basic Setup
 
 ```tsx
-import { EvaaBridge } from '@evaa/bridge-widget';
-import '@evaa/bridge-widget/styles.css';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { WagmiProvider } from 'wagmi';
-import { TonConnectUIProvider } from '@tonconnect/ui-react';
-import { WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
-import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
-import { useMemo } from 'react';
+import { EvaaBridge } from "@evaa/bridge-widget";
+import "@evaa/bridge-widget/styles.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider } from "wagmi";
+import { TonConnectUIProvider } from "@tonconnect/ui-react";
+import { WalletProvider } from "@tronweb3/tronwallet-adapter-react-hooks";
+import { TronLinkAdapter } from "@tronweb3/tronwallet-adapters";
+import { useMemo } from "react";
 
 const queryClient = new QueryClient();
 
 function App() {
-  // Configure Tron wallet adapters
   const tronAdapters = useMemo(() => [new TronLinkAdapter()], []);
 
   return (
@@ -87,19 +105,19 @@ function App() {
 <EvaaBridge
   defaultLanguage="ru" // Set default language (en, ru)
   onSwapSuccess={(data) => {
-    console.log('Swap completed:', data);
+    console.log("Swap completed:", data);
   }}
   onSwapError={(error) => {
-    console.error('Swap failed:', error);
+    console.error("Swap failed:", error);
   }}
   onInitialized={() => {
-    console.log('Bridge initialized');
+    console.log("Bridge initialized");
   }}
   onAmountChange={(amount) => {
-    console.log('Amount changed:', amount);
+    console.log("Amount changed:", amount);
   }}
   onChainChange={(data) => {
-    console.log('Chain changed:', data);
+    console.log("Chain changed:", data);
   }}
 />
 ```
@@ -108,32 +126,32 @@ function App() {
 
 ### EvaaBridgeProps
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `className` | `string` | Optional CSS class for custom styling |
-| `defaultLanguage` | `string` | Language for the widget UI (default: `'en'`). Supported: `'en'`, `'ru'` |
-| `tonClient` | `TonClient` | Optional TON client instance |
-| `tonApiKey` | `string` | Optional TON API key |
-| `onInitialized` | `() => void` | Callback when bridge is initialized |
-| `onSwapStart` | `(data: SwapStartData) => void` | Callback when swap starts |
-| `onSwapSuccess` | `(data: SwapSuccessData) => void` | Callback when swap succeeds |
-| `onSwapError` | `(error: SwapErrorData) => void` | Callback when swap fails |
-| `onAmountChange` | `(amount: string) => void` | Callback when amount changes |
-| `onChainChange` | `(data: ChainChangeData) => void` | Callback when chain changes |
+| Prop              | Type                              | Description                                                             |
+| ----------------- | --------------------------------- | ----------------------------------------------------------------------- |
+| `className`       | `string`                          | Optional CSS class for custom styling                                   |
+| `defaultLanguage` | `string`                          | Language for the widget UI (default: `'en'`). Supported: `'en'`, `'ru'` |
+| `tonClient`       | `TonClient`                       | Optional TON client instance                                            |
+| `tonApiKey`       | `string`                          | Optional TON API key                                                    |
+| `onInitialized`   | `() => void`                      | Callback when bridge is initialized                                     |
+| `onSwapStart`     | `(data: SwapStartData) => void`   | Callback when swap starts                                               |
+| `onSwapSuccess`   | `(data: SwapSuccessData) => void` | Callback when swap succeeds                                             |
+| `onSwapError`     | `(error: SwapErrorData) => void`  | Callback when swap fails                                                |
+| `onAmountChange`  | `(amount: string) => void`        | Callback when amount changes                                            |
+| `onChainChange`   | `(data: ChainChangeData) => void` | Callback when chain changes                                             |
 
 ## Configuration
 
 ### Wagmi Config (for EVM chains)
 
 ```tsx
-import { createConfig } from 'wagmi';
-import { getDefaultConfig } from 'connectkit';
-import { mainnet, arbitrum, polygon, base, bsc } from 'wagmi/chains';
+import { createConfig } from "wagmi";
+import { getDefaultConfig } from "connectkit";
+import { mainnet, arbitrum, polygon, base, bsc } from "wagmi/chains";
 
 const wagmiConfig = createConfig(
   getDefaultConfig({
-    appName: 'Your App Name',
-    walletConnectProjectId: 'YOUR_PROJECT_ID',
+    appName: "Your App Name",
+    walletConnectProjectId: "YOUR_PROJECT_ID",
     chains: [mainnet, arbitrum, polygon, base, bsc],
   })
 );
@@ -156,20 +174,21 @@ Create a `tonconnect-manifest.json` file:
 Configure Tron wallet adapters using the official `@tronweb3/tronwallet-adapter-react-hooks`:
 
 ```tsx
-import { WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
-import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
-import { useMemo } from 'react';
+import { WalletProvider } from "@tronweb3/tronwallet-adapter-react-hooks";
+import { TronLinkAdapter } from "@tronweb3/tronwallet-adapters";
+import { useMemo } from "react";
 
 function App() {
-  const tronAdapters = useMemo(() => [
-    new TronLinkAdapter(),
-    // You can add other adapters here
-  ], []);
+  const tronAdapters = useMemo(
+    () => [
+      new TronLinkAdapter(),
+      // You can add other adapters here
+    ],
+    []
+  );
 
   return (
-    <WalletProvider adapters={tronAdapters}>
-      {/* Your app */}
-    </WalletProvider>
+    <WalletProvider adapters={tronAdapters}>{/* Your app */}</WalletProvider>
   );
 }
 ```
@@ -183,7 +202,7 @@ The widget comes with pre-compiled Tailwind CSS styles. **You don't need to have
 Simply import the styles and you're good to go:
 
 ```tsx
-import '@evaa/bridge-widget/styles.css';
+import "@evaa/bridge-widget/styles.css";
 ```
 
 All Tailwind utility classes used by the widget are already included in the compiled CSS. The widget has its own Tailwind configuration that ensures all necessary classes are bundled during the library build process.
@@ -194,12 +213,12 @@ Customize the widget's appearance by overriding CSS variables in your own styles
 
 ```css
 :root {
-  --primary: #0095f9;        /* Primary brand color */
-  --background: #ffffff;     /* Background color */
-  --foreground: #171717;     /* Text color */
-  --card: #f2f2f2;          /* Card background */
-  --border: #00000029;      /* Border color */
-  --radius: 0.625rem;       /* Border radius */
+  --primary: #0095f9; /* Primary brand color */
+  --background: #ffffff; /* Background color */
+  --foreground: #171717; /* Text color */
+  --card: #f2f2f2; /* Card background */
+  --border: #00000029; /* Border color */
+  --radius: 0.625rem; /* Border radius */
   /* ... see dist/styles.css for all available variables */
 }
 
@@ -212,6 +231,7 @@ Customize the widget's appearance by overriding CSS variables in your own styles
 ```
 
 **Complete list of customizable CSS variables:**
+
 - Color tokens: `--background`, `--foreground`, `--primary`, `--secondary`, `--muted`, `--accent`, `--destructive`, `--border`, `--input`, `--ring`
 - Semantic colors: `--link`, `--filter`, `--swap`, `--settings-button`, `--modal-x`, `--input-icon`, `--balance-icon`, and many more
 - Border radius: `--radius` (affects all rounded corners)
@@ -227,8 +247,8 @@ Customize the widget's appearance by overriding CSS variables in your own styles
 import {
   useChainsStore,
   useTokensStore,
-  useBridgeQuoteStore
-} from '@evaa/bridge-widget';
+  useBridgeQuoteStore,
+} from "@evaa/bridge-widget";
 
 function YourComponent() {
   const { chains } = useChainsStore();
@@ -247,8 +267,8 @@ import type {
   Token,
   Quote,
   EvaaBridgeProps,
-  SwapSuccessData
-} from '@evaa/bridge-widget';
+  SwapSuccessData,
+} from "@evaa/bridge-widget";
 ```
 
 ## Supported Chains
@@ -264,6 +284,7 @@ import type {
 ## API Integration
 
 The widget integrates with Stargate Protocol API for:
+
 - Cross-chain token swaps
 - Real-time quotes
 - Transaction routing
@@ -274,7 +295,7 @@ The widget integrates with Stargate Protocol API for:
 The package is written in TypeScript and includes full type definitions.
 
 ```tsx
-import type { EvaaBridgeProps, Chain, Token } from '@evaa/bridge-widget';
+import type { EvaaBridgeProps, Chain, Token } from "@evaa/bridge-widget";
 ```
 
 ## Browser Support
@@ -317,5 +338,6 @@ MIT © EVAA Finance
 ## Support
 
 For issues and questions:
+
 - GitHub Issues: https://github.com/evaa-finance/bridge-widget/issues
 - Email: support@evaa.finance