@xswap-link/sdk 0.10.10 → 0.10.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.10.10",
+  "version": "0.10.12",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {

package/src/components/Swap/SwapView/ConfirmationView/TxOverview/ArrowIcon.tsx

@@ -2,7 +2,7 @@ import { ArrowDownLongIcon } from "@src/assets/icons";
 
 export const ArrowIcon = () => {
   return (
-    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-14 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl bg-t_bg_secondary">
+    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl bg-t_bg_secondary">
       <div className="relative bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark w-8 h-8 rounded-xl">
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-white">
           <ArrowDownLongIcon />

package/src/components/Swap/SwapView/ConfirmationView/TxOverview/SwapPanel/index.tsx

@@ -47,7 +47,7 @@ export const SwapPanel = ({ type }: Props) => {
         <div className={`${type === "destination" && "text-t_text_secondary"}`}>
           {value}
         </div>
-        <div className="opacity-60">${valueUsd}</div>
+        {valueUsd && <div className="opacity-60">${valueUsd}</div>}
       </div>
       <div className="flex items-center gap-3">
         <div className="flex flex-col text-right">

package/src/components/Swap/SwapView/SwapButton/index.tsx

@@ -31,7 +31,6 @@ export const SwapButton = () => {
     srcToken,
     dstToken,
     srcValueWei,
-    srcTokenBalanceWei,
     isFetchingRoute,
     isAsyncDataLoaded,
     hasOnConnectWalletCallback,
@@ -246,7 +245,6 @@ export const SwapButton = () => {
     solana.address,
     chainId,
     srcValueWei,
-    srcTokenBalanceWei,
     isFetchingRoute,
     currentTokenAllowance,
     bridgeUI,

package/src/components/TokenLogo/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { UnknownTokenLogo } from "./Unknown";
 import { Token } from "@src/models";
 
@@ -13,6 +13,9 @@ export const TokenLogo = ({
   generatedLogoClassName,
 }: Props) => {
   const [errorOcurred, setErrorOccured] = useState(false);
+  useEffect(() => {
+    setErrorOccured(false);
+  }, [token?.address]);
   if (!token) {
     return null;
   }

package/src/components/TxWidgetWC/index.tsx

@@ -5,7 +5,7 @@ import {
   WidgetIntegrationPayload,
 } from "@src/models";
 import { getChains, setApiUrl } from "@src/services";
-import { isServer } from "@src/utils";
+import { isServer, resolveTokenAddress } from "@src/utils";
 import { createWebComponent } from "@src/utils/webComponents";
 import { useEffect, useState } from "react";
 import { Spinner } from "../Spinner";
@@ -15,10 +15,10 @@ import { addCustomTokensToChains } from "@src/utils/tokens";
 
 const TxWidget = ({
   integratorId,
-  dstChain,
-  dstToken,
-  srcChain,
-  srcToken,
+  dstChain: dstChainId,
+  dstToken: dstTokenId,
+  srcChain: srcChainId,
+  srcToken: srcTokenId,
   customContractCalls = [],
   desc,
   dstDisplayToken,
@@ -43,6 +43,12 @@ const TxWidget = ({
 }: WidgetIntegrationPayload) => {
   const [loading, setLoading] = useState(true);
   const [supportedChains, setSupportedChains] = useState<Chain[]>([]);
+  const [srcTokenAddr, setSrcTokenAddr] = useState<string | undefined>(
+    undefined,
+  );
+  const [dstTokenAddr, setDstTokenAddr] = useState<string | undefined>(
+    undefined,
+  );
 
   useEffect(() => {
     (async () => {
@@ -76,6 +82,23 @@ const TxWidget = ({
     }
   })();
 
+  useEffect(() => {
+    const newSrcTokenAddr = resolveTokenAddress(
+      srcTokenId,
+      srcChainId,
+      supportedChains,
+    );
+
+    const newDstTokenAddr = resolveTokenAddress(
+      dstTokenId,
+      dstChainId,
+      supportedChains,
+    );
+
+    setSrcTokenAddr(newSrcTokenAddr);
+    setDstTokenAddr(newDstTokenAddr);
+  }, [srcTokenId, srcChainId, dstTokenId, dstChainId, supportedChains]);
+
   return (
     <>
       <style>{CSS}</style>
@@ -87,10 +110,10 @@ const TxWidget = ({
       ) : (
         <TxConfigForm
           integratorId={integratorId}
-          dstChainId={dstChain}
-          dstTokenAddr={dstToken}
-          srcChainId={srcChain}
-          srcTokenAddr={srcToken}
+          dstChainId={dstChainId}
+          dstTokenAddr={dstTokenAddr}
+          srcChainId={srcChainId}
+          srcTokenAddr={srcTokenAddr}
           customContractCalls={customContractCalls}
           desc={desc}
           dstDisplayTokenAddr={dstDisplayToken}

package/src/context/SwapProvider.tsx

@@ -782,25 +782,43 @@ export const SwapProvider = ({
   }, [refreshBalance]);
   // fetches user all token balances when a wallet address is available and supported chains are loaded.
   useEffect(() => {
+    let isCancelled = false;
+
     if ((evmAddress || solanaAddress) && supportedChains.length > 0) {
       setIsFetchingBalances(true);
+
       getBalances({
         walletAddress: evmAddress,
         solanaWalletAddress: solanaAddress,
       }).then((balances) => {
-        setTokenBalances(balances);
-        setIsFetchingBalances(false);
+        if (!isCancelled) {
+          setTokenBalances(balances);
+          setIsFetchingBalances(false);
+        }
       });
     }
+
+    return () => {
+      isCancelled = true; // prevent state update from stale async call
+    };
   }, [evmAddress, solanaAddress, supportedChains.length]);
   // sets the fee token from the source chain's tokens by selecting the native token (AddressZero).
   useEffect(() => {
-    setFeeToken(
-      srcChain?.tokens.find(
-        ({ address }) =>
-          address.toLowerCase() === constants.AddressZero.toLowerCase(),
-      ),
-    );
+    if (srcChain?.chainId === "mainnet-beta") {
+      setFeeToken(
+        srcChain?.tokens.find(
+          ({ address }) =>
+            address === "So11111111111111111111111111111111111111112",
+        ),
+      );
+    } else {
+      setFeeToken(
+        srcChain?.tokens.find(
+          ({ address }) =>
+            address.toLowerCase() === constants.AddressZero.toLowerCase(),
+        ),
+      );
+    }
   }, [srcChain]);
 
   // =============================================================================