@rash2x/bridge-widget 0.2.11 → 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

@@ -71,32 +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 { WalletProvider } from "@tronweb3/tronwallet-adapter-react-hooks";
-import { TronLinkAdapter } from "@tronweb3/tronwallet-adapters";
-import { useMemo } from "react";
-
-const queryClient = new QueryClient();
-
-function App() {
+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 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
@@ -139,74 +220,6 @@ function App() {
 | `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.
-
 ### Theme Customization
 
 Customize the widget's appearance by overriding CSS variables in your own stylesheet:
@@ -230,47 +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)
@@ -298,13 +270,6 @@ The package is written in TypeScript and includes full type definitions.
 import type { EvaaBridgeProps, Chain, Token } from "@evaa/bridge-widget";
 ```
 
-## Browser Support
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-
 ## Development
 
 ```bash