@rash2x/bridge-widget 0.2.10 → 0.3.0

package/LICENSE

@@ -19,3 +19,5 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+Made by https://t.me/rashdeva special for EVAA

package/README.md

@@ -60,6 +60,7 @@ 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
 
@@ -70,33 +71,113 @@ For detailed setup instructions, see [SHADCN_COMPONENTS.md](./SHADCN_COMPONENTS.
 ### 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 { animated, useSpring } from '@react-spring/web';
+import { useTranslation } from 'react-i18next';
 import { WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks';
 import { TronLinkAdapter } from '@tronweb3/tronwallet-adapters';
+import { ConnectKitProvider } from 'connectkit';
+import { EvaaBridge } from '@rash2x/bridge-widget';
+import { TransactionConfirmVector } from '@/components/vectors/TransactionConfirm';
+import { TransactionProgressVector } from '@/components/vectors/TransactionProgress';
+import { TransactionSuccessVector } from '@/components/vectors/TransactionSuccess';
+import Fireworks from 'react-canvas-confetti/dist/presets/fireworks';
+import { TransactionFailedVector } from '@/components/vectors/TransactionFailed';
 import { useMemo } from 'react';
+import { WagmiProvider, createConfig, http } from 'wagmi';
+import { mainnet, arbitrum, polygon, base, bsc } from 'wagmi/chains';
+import { injected, walletConnect, metaMask } from 'wagmi/connectors';
+import { Card } from '@/components/ui/card';
+
+const walletConnectProjectId = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || '5e81fa2f7739ab20482103c77a1b5cbf';
+
+const config = createConfig({
+  chains: [mainnet, arbitrum, polygon, base, bsc],
+  connectors: [injected(), metaMask(), walletConnect({ projectId: walletConnectProjectId })],
+  transports: {
+    [mainnet.id]: http(),
+    [arbitrum.id]: http(),
+    [polygon.id]: http(),
+    [base.id]: http(),
+    [bsc.id]: http()
+  }
+});
+
+export const BridgePage = () => {
+  const { t, i18n } = useTranslation();
+  const [props] = useSpring(() => ({
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+  }));
 
-const queryClient = new QueryClient();
-
-function App() {
-  // Configure Tron wallet adapters
   const tronAdapters = useMemo(() => [new TronLinkAdapter()], []);
 
+  const transactionIcons = useMemo(
+    () => ({
+      confirm: (
+        <>
+          <TransactionConfirmVector />
+          <div className="on-circle on-circle-confirm-small under-noise"></div>
+          <div className="on-circle on-circle-confirm-big under-noise"></div>
+        </>
+      ),
+      progress: (
+        <>
+          <TransactionProgressVector className="progress-rocket" />
+          <div className="on-circle on-circle-progress-small under-noise"></div>
+          <div className="on-circle on-circle-progress-big under-noise"></div>
+          <div className="meteors-container under-noise">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </>
+      ),
+      success: (
+        <>
+          <TransactionSuccessVector />
+          <Fireworks
+            autorun={{
+              speed: 3,
+              duration: 1000,
+              delay: 300
+            }}
+          />
+          <div className="on-circle on-circle-success-small under-noise"></div>
+          <div className="on-circle on-circle-success-big under-noise"></div>
+        </>
+      ),
+      failed: (
+        <>
+          <TransactionFailedVector />
+          <div className="on-circle on-circle-failed-small under-noise"></div>
+          <div className="on-circle on-circle-failed-big under-noise"></div>
+        </>
+      )
+    }),
+    []
+  );
+
   return (
-    <QueryClientProvider client={queryClient}>
-      <WagmiProvider config={wagmiConfig}>
-        <TonConnectUIProvider manifestUrl="https://your-app.com/tonconnect-manifest.json">
-          <WalletProvider adapters={tronAdapters}>
-            <EvaaBridge />
-          </WalletProvider>
-        </TonConnectUIProvider>
-      </WagmiProvider>
-    </QueryClientProvider>
+    <animated.div style={props} className="space-y-4 pb-5 overflow-auto">
+      <Card className="bg-master rounded-lg py-6 px-5 md:grid md:grid-cols-2 gap-8 lg:gap-10">
+        <header className="px-5 space-y-3 md:px-0">
+          <h1 className="font-display font-black shrink-0 text-5xl">{t('bridge')}</h1>
+          <p className="text-sm text-muted-foreground">{t('bridgeDescription')}</p>
+        </header>
+        <WagmiProvider config={config}>
+          <ConnectKitProvider>
+            <WalletProvider adapters={tronAdapters} disableAutoConnectOnLoad={true}>
+              <EvaaBridge defaultLanguage={i18n.language} transactionIcons={transactionIcons} />
+            </WalletProvider>
+          </ConnectKitProvider>
+        </WagmiProvider>
+      </Card>
+    </animated.div>
   );
-}
+};
 ```
 
 ### 2. With Event Handlers and Language
@@ -105,19 +186,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);
   }}
 />
 ```
@@ -126,85 +207,18 @@ 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 |
-
-## Configuration
-
-### Wagmi Config (for EVM chains)
-
-```tsx
-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',
-    chains: [mainnet, arbitrum, polygon, base, bsc],
-  })
-);
-```
-
-### TonConnect Manifest
-
-Create a `tonconnect-manifest.json` file:
-
-```json
-{
-  "url": "https://your-app.com",
-  "name": "Your App Name",
-  "iconUrl": "https://your-app.com/icon.png"
-}
-```
-
-### Tron Wallet Adapters
-
-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';
-
-function App() {
-  const tronAdapters = useMemo(() => [
-    new TronLinkAdapter(),
-    // You can add other adapters here
-  ], []);
-
-  return (
-    <WalletProvider adapters={tronAdapters}>
-      {/* Your app */}
-    </WalletProvider>
-  );
-}
-```
-
-## Styling
-
-The widget comes with pre-compiled Tailwind CSS styles. **You don't need to have Tailwind installed** in your project for the widget to work.
-
-### Basic Usage
-
-Simply import the styles and you're good to go:
-
-```tsx
-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.
+| 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                                             |
 
 ### Theme Customization
 
@@ -212,12 +226,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 */
 }
 
@@ -229,46 +243,6 @@ 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)
-- See the `dist/styles.css` file for the complete list
-
-**Note:** The widget will work perfectly fine without Tailwind in your consuming project. All necessary styles are pre-compiled and included in `styles.css`.
-
-## Advanced Usage
-
-### Using Stores Directly
-
-```tsx
-import {
-  useChainsStore,
-  useTokensStore,
-  useBridgeQuoteStore
-} from '@evaa/bridge-widget';
-
-function YourComponent() {
-  const { chains } = useChainsStore();
-  const { tokens } = useTokensStore();
-  const { quote } = useBridgeQuoteStore();
-
-  // Your logic here
-}
-```
-
-### Type Exports
-
-```tsx
-import type {
-  Chain,
-  Token,
-  Quote,
-  EvaaBridgeProps,
-  SwapSuccessData
-} from '@evaa/bridge-widget';
-```
-
 ## Supported Chains
 
 - Ethereum (Mainnet)
@@ -282,6 +256,7 @@ import type {
 ## API Integration
 
 The widget integrates with Stargate Protocol API for:
+
 - Cross-chain token swaps
 - Real-time quotes
 - Transaction routing
@@ -292,16 +267,9 @@ 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
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-
 ## Development
 
 ```bash
@@ -335,5 +303,6 @@ MIT © EVAA Finance
 ## Support
 
 For issues and questions:
+
 - GitHub Issues: https://github.com/evaa-finance/bridge-widget/issues
 - Email: support@evaa.finance