@xswap-link/sdk 0.8.4 → 0.8.5

package/package.json

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

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

@@ -54,7 +54,11 @@ export const SwapPanel = ({ type }: Props) => {
           <div>{token?.symbol}</div>
           <div className="opacity-60">{chain?.displayName}</div>
         </div>
-        <TokenLogo token={token} className="w-[34px]" />
+        <TokenLogo
+          token={token}
+          className="w-9 h-9"
+          generatedLogoClassName="w-9 h-9"
+        />
       </div>
     </div>
   );

package/src/components/Swap/SwapView/ConfirmationView/TxResult/TokenItem/index.tsx

@@ -13,7 +13,8 @@ export const TokenItem = ({ chain, token, value }: Props) => {
         chain={chain}
         token={token}
         chainLogoClassName="w-5"
-        tokenLogoClassName="w-[34px]"
+        tokenLogoClassName="w-9 h-9"
+        generatedLogoClassName="w-9 h-9 text-[16px]"
       />
       <div className="flex flex-col w-min sm:w-auto">
         <div>{`${value} ${token?.symbol}`}</div>

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/QuickPickTokenItem/index.tsx

@@ -30,7 +30,11 @@ export const QuickPickTokenItem = ({
       }`}
       onClick={onClick}
     >
-      <TokenLogo token={token} className="w-6" generatedLogoClassName="w-6" />
+      <TokenLogo
+        token={token}
+        className="w-6 h-6"
+        generatedLogoClassName="w-6 h-6"
+      />
       <div className="flex flex-col gap-1 text-xs font-medium !leading-3">
         <div className="text-t_text_primary">{token.symbol}</div>
         <div className="text-t_text_primary text-opacity-50">

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/TokenItem/index.tsx

@@ -31,8 +31,8 @@ export const TokenItem = ({ token, selectedTokenAddress, onClick }: Props) => {
       <TokenLogoWithChain
         token={token}
         chain={chain}
-        tokenLogoClassName="w-9"
-        generatedLogoClassName="w-9 min-w-9 h-9 text-[16px]"
+        tokenLogoClassName="min-w-9 w-9 h-9"
+        generatedLogoClassName="min-w-9 w-9 h-9 text-[16px]"
         chainLogoClassName="w-5"
       />
       <div className="flex justify-between items-center gap-1 w-full">

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/index.tsx

@@ -350,7 +350,8 @@ export const TokenPicker = ({
                 <TokenLogoWithChain
                   token={customTokenData}
                   chain={chain}
-                  tokenLogoClassName="w-9"
+                  tokenLogoClassName="w-9 h-9"
+                  generatedLogoClassName="w-9 h-9 text-[16px]"
                   chainLogoClassName="w-5"
                 />
                 <div className="flex justify-between items-center gap-1 overflow-hidden grow">

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/index.tsx

@@ -107,8 +107,8 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
           <div className="flex gap-2 items-center">
             <TokenLogo
               token={token}
-              className="w-[34px] h-[34px]"
-              generatedLogoClassName=" text-[16px]"
+              className="w-9 h-9"
+              generatedLogoClassName="w-9 h-9 text-[16px]"
             />
             <div className="flex flex-col font-medium items-start">
               <p className="text-xs opacity-60">Token: </p>

package/src/components/TokenLogo/Unknown/index.tsx

@@ -5,7 +5,7 @@ type Props = {
 export const UnknownTokenLogo = ({ tokenName, className }: Props) => {
   return (
     <div
-      className={`w-5 h-5 rounded-full bg-white shadow-sm flex items-center justify-center text-black ${className}`}
+      className={`rounded-full bg-white shadow-sm flex items-center justify-center text-black ${className}`}
     >
       {tokenName.substring(0, 1)}
     </div>

package/src/components/TokenLogo/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { UnknownTokenLogo } from "./Unknown";
 import { Token } from "@src/models";
 
@@ -11,16 +12,30 @@ export const TokenLogo = ({
   className,
   generatedLogoClassName,
 }: Props) => {
+  const [errorOcurred, setErrorOccured] = useState(false);
+  if (!token) {
+    return null;
+  }
+  if (errorOcurred) {
+    return (
+      <UnknownTokenLogo
+        tokenName={token.name!}
+        className={generatedLogoClassName}
+      />
+    );
+  }
+
   return token?.image ? (
     <img
       src={token.image}
       alt={token.name}
       className={`border border-solid border-t_text_primary border-opacity-10 rounded-2xl ${className}`}
+      onError={() => setErrorOccured(true)}
     />
-  ) : token ? (
+  ) : (
     <UnknownTokenLogo
       tokenName={token.name!}
       className={generatedLogoClassName}
     />
-  ) : null;
+  );
 };

package/src/components/TxDataCard/TokenDetails/index.tsx

@@ -13,9 +13,9 @@ export const TokenDetails = ({ chain, token, amount }: Props) => {
       <TokenLogoWithChain
         token={token}
         chain={chain}
-        tokenLogoClassName="min-w-9 w-9"
-        generatedLogoClassName="min-w-9 w-9 text-[16px]"
-        chainLogoClassName="min-w-5 w-5"
+        tokenLogoClassName="min-w-9 w-9 h-9"
+        generatedLogoClassName="min-w-9 w-9 h-9 text-[16px]"
+        chainLogoClassName="w-5"
       />
       <div className="flex flex-col text-[12px]">
         <div className="text-t_text_primary text-nowrap">