@rash2x/bridge-widget 0.1.18 → 0.1.20

package/README.md

@@ -194,38 +194,49 @@ function App() {
 
 ## 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
-};
+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';
 ```
 
-### Custom Theme
+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
 
-You can customize the theme by overriding CSS variables:
+Customize the widget's appearance by overriding CSS variables in your own stylesheet:
 
 ```css
 :root {
-  --primary: #your-color;
-  --background: #your-color;
-  /* ... other variables */
+  --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 */
 }
 
 [data-theme="dark"] {
-  --primary: #your-dark-color;
-  /* ... other variables */
+  --primary: #5200ff;
+  --background: #000000;
+  --foreground: #ffffff;
+  /* ... dark theme overrides */
 }
 ```
 
+**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

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;
+  }

package/dist/evaa-bridge.cjs

@@ -193,7 +193,7 @@ const initialState = {
 };
 const useTokensStore = zustand.create((set) => ({
   ...initialState,
-  setTokens: async (data) => {
+  setTokens: (data) => {
     set({ tokens: data, assetMatrix: buildAssetMatrix(data) });
   },
   setSelectedToken: (data) => {
@@ -1109,7 +1109,9 @@ function useBalances(chainKey, address, priorityTokenSymbol) {
     const tokensList = [];
     for (const [, byChain] of Object.entries(assetMatrix)) {
       const token = byChain[chainKey];
-      if (token) tokensList.push(token);
+      if (token && token.address && token.address.length > 2) {
+        tokensList.push(token);
+      }
     }
     return tokensList;
   }, [assetMatrix, chainKey]);
@@ -1117,7 +1119,10 @@ function useBalances(chainKey, address, priorityTokenSymbol) {
     if (!priorityTokenSymbol || !chainKey || !assetMatrix) return void 0;
     const normalizedSymbol = normalizeTickerSymbol$1(priorityTokenSymbol);
     const token = assetMatrix[normalizedSymbol]?.[chainKey];
-    return token;
+    if (token && token.address && token.address.length > 2) {
+      return token;
+    }
+    return void 0;
   }, [priorityTokenSymbol, chainKey, assetMatrix]);
   const query = reactQuery.useQuery({
     queryKey: ["balances", chainKey, address, priorityTokenSymbol],
@@ -1132,7 +1137,7 @@ function useBalances(chainKey, address, priorityTokenSymbol) {
         priorityToken
       );
     },
-    enabled: !!address && !!chainKey && tokensOnChain.length > 0 && isAddressValidForChain(chainKey, address),
+    enabled: !!address && !!chainKey && !!assetMatrix && tokensOnChain.length > 0 && isAddressValidForChain(chainKey, address),
     staleTime: 6e4,
     gcTime: 5 * 6e4,
     refetchOnWindowFocus: false,
@@ -2877,7 +2882,7 @@ const Details = () => {
   })();
   const currentSlippageText = formatPercentage(slippageBps);
   const routeText = quote?.route ? getRouteDisplayName(quote.route) : t(`settings.routePresets.${routePriority}`);
-  return /* @__PURE__ */ jsxRuntime.jsx(accordion.Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(accordion.AccordionItem, { value: "item-1", className: "bg-muted rounded-lg", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(accordion.Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(accordion.AccordionItem, { value: "item-1", className: "bg-muted rounded", children: [
     /* @__PURE__ */ jsxRuntime.jsx(accordion.AccordionTrigger, { className: "w-full gap-1 items-center py-6 px-5 rounded-b-lg data-[state=open]:pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-normal text-priority leading-4", children: t("bridge.youWillReceive", { defaultValue: "You will receive" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-transparent hover:bg-transparent shadow-none h-4 p-0 px-0 py-0 flex items-center gap-2", children: [
@@ -3229,10 +3234,11 @@ function useBridgeTransaction() {
         dstChainKey: quote.dstChainKey
       };
       console.log(steps);
-      const txResult = await strategy.executeSteps(steps, context);
-      if (txResult?.hash) {
-        txStore.setSrcHash(txResult.hash);
+      const txResult = await strategy.executeSteps(steps, context, (hash) => {
+        txStore.setSrcHash(hash);
         txStore.updateStatus("processing");
+      });
+      if (txResult?.hash) {
         strategy.waitForCompletion(txResult.hash, context).then((result) => {
           if (result.completed) {
             if (result.dstTxHash) {
@@ -5698,7 +5704,7 @@ const TransactionManager = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: true, onOpenChange: () => {
   }, children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogContent, { showCloseButton: false, className: "p-0 gap-0 border-none max-w-[calc(100%-2rem)] sm:max-w-md", children: step }) });
 };
-const useTokensRequest = () => {
+const useTokens = () => {
   const { setTokens, setSelectedToken, setSelectedAssetSymbol } = useTokensStore();
   const query = reactQuery.useQuery({
     queryKey: ["tokens"],
@@ -5733,7 +5739,7 @@ const useTokensRequest = () => {
   }, [query.isError, query.error]);
   return { ...query };
 };
-const useChainsRequest = () => {
+const useChains = () => {
   const { setChains, setFromChain } = useChainsStore();
   const query = reactQuery.useQuery({
     queryKey: ["chains"],
@@ -5790,7 +5796,7 @@ class ChainStrategyRegistry {
   async getBalances(chainKey, address, tokens, priorityToken) {
     const strategy = this.getStrategy(chainKey);
     if (!strategy) return {};
-    return await strategy.getBalances(address, tokens, chainKey, priorityToken);
+    return await strategy.getBalances(address, tokens, priorityToken);
   }
   isAddressValid(chainKey, address) {
     const strategy = this.getStrategy(chainKey);
@@ -5901,7 +5907,7 @@ function parseTonAddress(address) {
   }
   return ton.Address.parse(address);
 }
-async function getEvmBalances(publicClient, address, tokens, chainKey, priorityToken) {
+async function getEvmBalances(publicClient, address, tokens, priorityToken) {
   const balances = {};
   try {
     if (!address || !viem.isAddress(address)) {
@@ -5916,51 +5922,49 @@ async function getEvmBalances(publicClient, address, tokens, chainKey, priorityT
       (t) => !isNativeAddress(t.address) && viem.isAddress(t.address)
     );
     if (priorityToken) {
-      if (priorityToken.chainKey !== chainKey) {
-        console.debug(
-          `Skipping priority token ${priorityToken.symbol}: chain mismatch (expected ${chainKey}, got ${priorityToken.chainKey})`
-        );
-      } else {
-        try {
-          const isPriorityNative = isNativeAddress(priorityToken.address);
-          if (isPriorityNative) {
-            const ethBalance = await publicClient.getBalance({
-              address
-            });
-            const balance = parseFloat(
-              viem.formatUnits(ethBalance, priorityToken.decimals)
-            );
-            if (balance > 0) {
-              balances[priorityToken.symbol] = { balance, address };
-            }
-          } else if (viem.isAddress(priorityToken.address)) {
-            const tokenBalance = await publicClient.readContract({
-              address: priorityToken.address,
-              abi: [
-                {
-                  name: "balanceOf",
-                  type: "function",
-                  stateMutability: "view",
-                  inputs: [{ name: "owner", type: "address" }],
-                  outputs: [{ name: "balance", type: "uint256" }]
-                }
-              ],
-              functionName: "balanceOf",
-              args: [address]
-            });
-            const balance = parseFloat(
-              viem.formatUnits(tokenBalance, priorityToken.decimals)
-            );
-            if (balance > 0) {
-              balances[priorityToken.symbol] = { balance, address };
-            }
+      try {
+        const isPriorityNative = isNativeAddress(priorityToken.address);
+        console.log(priorityToken);
+        console.log(isPriorityNative);
+        if (isPriorityNative) {
+          const ethBalance = await publicClient.getBalance({
+            address
+          });
+          const balance = parseFloat(
+            viem.formatUnits(ethBalance, priorityToken.decimals)
+          );
+          if (balance > 0) {
+            balances[priorityToken.symbol] = { balance, address };
           }
-        } catch (error) {
-          console.debug(
-            `Failed to get priority token balance for ${priorityToken.symbol}:`,
-            error
+        } else if (viem.isAddress(priorityToken.address)) {
+          const tokenBalance = await publicClient.readContract({
+            address: priorityToken.address,
+            abi: [
+              {
+                name: "balanceOf",
+                type: "function",
+                stateMutability: "view",
+                inputs: [{ name: "owner", type: "address" }],
+                outputs: [{ name: "balance", type: "uint256" }]
+              }
+            ],
+            functionName: "balanceOf",
+            args: [address]
+          });
+          console.log(tokenBalance);
+          const balance = parseFloat(
+            viem.formatUnits(tokenBalance, priorityToken.decimals)
           );
+          console.log(balance);
+          if (balance > 0) {
+            balances[priorityToken.symbol] = { balance, address };
+          }
         }
+      } catch (error) {
+        console.debug(
+          `Failed to get priority token balance for ${priorityToken.symbol}:`,
+          error
+        );
       }
     }
     for (const token of nativeTokens) {
@@ -6056,7 +6060,7 @@ async function getEvmBalances(publicClient, address, tokens, chainKey, priorityT
   }
   return balances;
 }
-async function getTonBalances(address, tokens, chainKey, customTonClient, tonApiKey) {
+async function getTonBalances(address, tokens, customTonClient, tonApiKey) {
   const balances = {};
   try {
     if (!isTonFriendlyAddress(address)) {
@@ -6215,7 +6219,7 @@ class EvmChainStrategy {
   getConnectLabel(t) {
     return t("wallets.connectEvmWallet");
   }
-  async getBalances(address, tokens, chainKey, priorityToken) {
+  async getBalances(address, tokens, priorityToken) {
     if (!this.publicClient) {
       console.warn("No publicClient available for balance query");
       return {};
@@ -6224,7 +6228,6 @@ class EvmChainStrategy {
       this.publicClient,
       address,
       tokens,
-      chainKey,
       priorityToken
     );
   }
@@ -6296,7 +6299,7 @@ class EvmChainStrategy {
       throw new InvalidStepsError("evm", "Missing transaction data in steps");
     }
   }
-  async executeSteps(steps) {
+  async executeSteps(steps, _context, onFirstHash) {
     if (!this.isConnected() || !this.provider) {
       throw new WalletNotConnectedError("evm");
     }
@@ -6310,11 +6313,17 @@ class EvmChainStrategy {
         if (step.type === "approve") {
           const hash = await this.approveTransaction(step);
           console.log(`Approval transaction hash: ${hash}`);
-          if (!firstTxHash) firstTxHash = hash;
+          if (!firstTxHash) {
+            firstTxHash = hash;
+            onFirstHash?.(hash);
+          }
         } else if (step.type === "bridge") {
           const hash = await this.executeTransaction(step);
           console.log(`Bridge transaction hash: ${hash}`);
-          if (!firstTxHash) firstTxHash = hash;
+          if (!firstTxHash) {
+            firstTxHash = hash;
+            onFirstHash?.(hash);
+          }
         } else {
           throw new InvalidStepsError(
             "evm",
@@ -6582,11 +6591,10 @@ class TonChainStrategy {
   getConnectLabel(t) {
     return t("wallets.connectTonWallet");
   }
-  async getBalances(address, tokens, chainKey) {
+  async getBalances(address, tokens) {
     return await getTonBalances(
       address,
       tokens,
-      chainKey,
       this.config.tonClient,
       this.config.tonApiKey
     );
@@ -6650,7 +6658,7 @@ class TonChainStrategy {
       }
     }
   }
-  async executeSteps(steps) {
+  async executeSteps(steps, _context, onFirstHash) {
     if (!this.isConnected() || !this.config.tonConnectUI) {
       throw new WalletNotConnectedError("ton");
     }
@@ -6676,9 +6684,11 @@ class TonChainStrategy {
       const result = await this.config.tonConnectUI.sendTransaction(
         transaction2
       );
+      const hash = result.boc;
+      onFirstHash?.(hash);
       return {
         chainKey: "ton",
-        hash: result.boc
+        hash
       };
     } catch (error) {
       throw toChainStrategyError(error, "ton", "transaction");
@@ -6887,7 +6897,7 @@ class TronChainStrategy {
       throw new InvalidTransactionDataError("tron", "Missing transaction data");
     }
   }
-  async executeSteps(steps) {
+  async executeSteps(steps, _context, onFirstHash) {
     console.log("executeSteps");
     const tronWeb = this.getTronWeb();
     if (!tronWeb) {
@@ -6902,6 +6912,7 @@ class TronChainStrategy {
       throw new WalletNotConnectedError("tron");
     }
     let lastTxId;
+    let isFirstHash = true;
     for (const step of steps) {
       if (String(step.chainKey).toLowerCase() !== "tron") continue;
       const tx = step.transaction;
@@ -6967,6 +6978,10 @@ class TronChainStrategy {
       }
       const { txid } = await this.signAndBroadcast(tronWeb, unsigned);
       lastTxId = txid;
+      if (isFirstHash) {
+        onFirstHash?.(txid);
+        isFirstHash = false;
+      }
     }
     if (!lastTxId) {
       throw new TransactionFailedError(
@@ -7523,8 +7538,8 @@ const EvaaBridgeContent = ({
   onChainChange
 } = {}) => {
   const { t } = useBridgeTranslation();
-  useTokensRequest();
-  useChainsRequest();
+  useTokens();
+  useChains();
   const swap = useSwapModel();
   const { fromChain, toChain } = swap;
   const { selectedAssetSymbol, assetMatrix } = useTokensStore();