@rash2x/bridge-widget 0.1.19 → 0.1.21

package/README.md

@@ -204,13 +204,11 @@ Simply import the styles and you're good to go:
 import '@evaa/bridge-widget/styles.css';
 ```
 
-All Tailwind utility classes used by the widget are already included in the compiled 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
 
-#### Option 1: CSS Variables (Simple)
-
-Customize colors by overriding CSS variables in your own stylesheet:
+Customize the widget's appearance by overriding CSS variables in your own stylesheet:
 
 ```css
 :root {
@@ -219,7 +217,8 @@ Customize colors by overriding CSS variables in your own stylesheet:
   --foreground: #171717;     /* Text color */
   --card: #f2f2f2;          /* Card background */
   --border: #00000029;      /* Border color */
-  /* ... see styles.css for all available variables */
+  --radius: 0.625rem;       /* Border radius */
+  /* ... see dist/styles.css for all available variables */
 }
 
 [data-theme="dark"] {
@@ -230,30 +229,13 @@ Customize colors by overriding CSS variables in your own stylesheet:
 }
 ```
 
-#### Option 2: Tailwind Integration (Advanced)
-
-If your project already uses Tailwind CSS and you want full control:
-
-1. Add the widget to your Tailwind `content` configuration:
-
-```js
-// tailwind.config.js
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@evaa/bridge-widget/**/*.{js,mjs}', // Add this line
-  ],
-  theme: {
-    extend: {
-      // Your custom theme extensions will apply to the widget
-    },
-  },
-};
-```
-
-2. The widget will use your project's Tailwind configuration in addition to its pre-compiled 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 project.
+**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
 

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,
@@ -2194,7 +2199,9 @@ const SwapButton = () => {
 };
 const WalletBalance = (props) => {
   const { value, isLoading = false } = props;
-  if (isLoading) {
+  const hasNoData = !value || value === "0" || value === "0.00" || value === "0.0";
+  const shouldShowSkeleton = isLoading && hasNoData;
+  if (shouldShowSkeleton) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(WalletIcon, { className: "text-muted-foreground" }),
       /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-16 rounded-md" })
@@ -2877,7 +2884,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 +3236,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 +5706,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 +5741,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 +5798,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 +5909,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)) {
@@ -5913,49 +5921,47 @@ async function getEvmBalances(publicClient, address, tokens, chainKey, priorityT
     }
     const nativeTokens = tokens.filter((t) => isNativeAddress(t.address));
     const erc20Tokens = tokens.filter(
-      (t) => !isNativeAddress(t.address) && viem.isAddress(t.address)
+      (t) => !isNativeAddress(t.address) && viem.isAddress(t.address) && (!priorityToken || t.address !== priorityToken.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);
+        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) {
+        } 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 };
+          }
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        const isZeroDataError = errorMessage.includes('returned no data ("0x")');
+        if (!isZeroDataError) {
           console.debug(
             `Failed to get priority token balance for ${priorityToken.symbol}:`,
             error
@@ -6056,7 +6062,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 +6221,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 +6230,6 @@ class EvmChainStrategy {
       this.publicClient,
       address,
       tokens,
-      chainKey,
       priorityToken
     );
   }
@@ -6296,7 +6301,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 +6315,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 +6593,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 +6660,7 @@ class TonChainStrategy {
       }
     }
   }
-  async executeSteps(steps) {
+  async executeSteps(steps, _context, onFirstHash) {
     if (!this.isConnected() || !this.config.tonConnectUI) {
       throw new WalletNotConnectedError("ton");
     }
@@ -6676,9 +6686,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 +6899,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 +6914,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 +6980,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 +7540,8 @@ const EvaaBridgeContent = ({
   onChainChange
 } = {}) => {
   const { t } = useBridgeTranslation();
-  useTokensRequest();
-  useChainsRequest();
+  useTokens();
+  useChains();
   const swap = useSwapModel();
   const { fromChain, toChain } = swap;
   const { selectedAssetSymbol, assetMatrix } = useTokensStore();