@rash2x/bridge-widget 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 EVAA Finance
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+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.

package/README.md

@@ -0,0 +1,307 @@
+# EVAA Bridge Widget
+
+A production-ready cross-chain bridge widget powered by Stargate Protocol with comprehensive multi-chain wallet support (Ethereum, TON, Tron).
+
+![npm version](https://img.shields.io/npm/v/@evaa/bridge-widget)
+![license](https://img.shields.io/npm/l/@evaa/bridge-widget)
+
+## Features
+
+- 🔗 **Multi-Chain Support**: Ethereum, TON, Tron, and other EVM chains
+- 🦊 **Wallet Integration**: MetaMask, TonConnect, TronLink, WalletConnect
+- 💱 **Real-time Quotes**: Get instant cross-chain swap quotes via Stargate Protocol
+- ⚡ **Transaction Management**: Built-in transaction monitoring and status tracking
+- 📊 **Balance Tracking**: Real-time wallet balance updates
+- 🎨 **Themeable**: Light/dark mode with customizable styling
+- 🌐 **i18n**: Built-in internationalization (EN/RU, easily extensible)
+- 📱 **Responsive**: Mobile-friendly design
+
+## Installation
+
+```bash
+npm install @evaa/bridge-widget
+# or
+yarn add @evaa/bridge-widget
+# or
+pnpm add @evaa/bridge-widget
+```
+
+### Peer Dependencies
+
+Install required peer dependencies:
+
+```bash
+npm install react react-dom @tanstack/react-query
+```
+
+For specific chain support, install additional peer dependencies:
+
+```bash
+# For Ethereum/EVM chains
+npm install wagmi ethers connectkit
+
+# For TON
+npm install @tonconnect/ui-react @ton/core @ton/crypto @ton/ton
+
+# For Tron
+npm install @tronweb3/tronwallet-adapter-react-hooks @tronweb3/tronwallet-adapters tronweb
+```
+
+## 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';
+
+const queryClient = new QueryClient();
+
+function App() {
+  // Configure Tron wallet adapters
+  const tronAdapters = useMemo(() => [new TronLinkAdapter()], []);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <WagmiProvider config={wagmiConfig}>
+        <TonConnectUIProvider manifestUrl="https://your-app.com/tonconnect-manifest.json">
+          <WalletProvider adapters={tronAdapters}>
+            <EvaaBridge />
+          </WalletProvider>
+        </TonConnectUIProvider>
+      </WagmiProvider>
+    </QueryClientProvider>
+  );
+}
+```
+
+### 2. With Event Handlers
+
+```tsx
+<EvaaBridge
+  onSwapSuccess={(data) => {
+    console.log('Swap completed:', data);
+  }}
+  onSwapError={(error) => {
+    console.error('Swap failed:', error);
+  }}
+  onInitialized={() => {
+    console.log('Bridge initialized');
+  }}
+  onAmountChange={(amount) => {
+    console.log('Amount changed:', amount);
+  }}
+  onChainChange={(data) => {
+    console.log('Chain changed:', data);
+  }}
+/>
+```
+
+## Props
+
+### EvaaBridgeProps
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `className` | `string` | Optional CSS class for custom styling |
+| `theme` | `'light' \| 'dark'` | Theme mode |
+| `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 uses Tailwind CSS. Make sure your project has Tailwind configured, or the styles will not work correctly.
+
+### Tailwind Configuration
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@evaa/bridge-widget/**/*.{js,mjs}',
+  ],
+  // ... rest of your config
+};
+```
+
+### Custom Theme
+
+You can customize the theme by overriding CSS variables:
+
+```css
+:root {
+  --primary: #your-color;
+  --background: #your-color;
+  /* ... other variables */
+}
+
+[data-theme="dark"] {
+  --primary: #your-dark-color;
+  /* ... other variables */
+}
+```
+
+## 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)
+- Arbitrum
+- Polygon
+- Base
+- BNB Chain
+- TON (The Open Network)
+- Tron
+
+## API Integration
+
+The widget integrates with Stargate Protocol API for:
+- Cross-chain token swaps
+- Real-time quotes
+- Transaction routing
+- Fee estimation
+
+## TypeScript
+
+The package is written in TypeScript and includes full type definitions.
+
+```tsx
+import type { EvaaBridgeProps, Chain, Token } from '@evaa/bridge-widget';
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build library
+npm run build:lib
+
+# Lint
+npm run lint
+```
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request.
+
+## License
+
+MIT © EVAA Finance
+
+## Links
+
+- [GitHub Repository](https://github.com/evaa-finance/bridge-widget)
+- [Stargate Protocol](https://stargate.finance)
+- [EVAA Finance](https://evaa.finance)
+
+## Support
+
+For issues and questions:
+- GitHub Issues: https://github.com/evaa-finance/bridge-widget/issues
+- Email: support@evaa.finance

package/dist/assets/fonts/fonts.css

@@ -0,0 +1,81 @@
+/* fonts.css */
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Thin.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-UltraLight.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Light.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Medium.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-SemiBold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Bold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-ExtraBold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Black.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Gilroy';
+  src: url('/assets/fonts/Gilroy-Heavy.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+}
+
+
+@font-face {
+    font-family: 'Hanson';
+    src:
+      url(/assets/fonts/hanson-bold.woff2) format('woff2'),
+      url(/assets/fonts/hanson-bold.woff) format('woff');
+    font-style: normal;
+    font-weight: 700;
+  }