@xswap-link/sdk 0.13.1 → 0.14.1

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

@@ -1,9 +1,9 @@
-import { StarsIcon } from "@src/assets/icons";
+import { StarsIcon, WarningIcon } from "@src/assets/icons";
 import { Skeleton, TokenLogoWithChain } from "@src/components";
 import { SwapPanelType } from "@src/components/Swap/SwapView";
 import { useSwapContext } from "@src/context";
 import { TokenOption } from "@src/models";
-import { weiToHumanReadable } from "@src/utils";
+import { shortAddress, weiToHumanReadable } from "@src/utils";
 import { ethers } from "ethers";
 import { useMemo } from "react";
 import { useAccount } from "wagmi";
@@ -14,6 +14,11 @@ type Props = {
   selectedChainId: string | undefined;
   onClick: () => void;
   panelType: SwapPanelType;
+  /**
+   * When picking this token would disconnect the other side of the swap,
+   * names the side that will be reset ("source" | "destination").
+   */
+  resetWarning?: SwapPanelType | null;
 };
 export const TokenItem = ({
   token,
@@ -21,6 +26,7 @@ export const TokenItem = ({
   onClick,
   selectedChainId,
   panelType,
+  resetWarning,
 }: Props) => {
   const {
     supportedChains,
@@ -55,66 +61,110 @@ export const TokenItem = ({
     return tokenBalance * +tokenPrice;
   }, [tokenBalance, tokenPrice, hasBalance]);
 
+  const isSelected =
+    token.address.toLowerCase() === selectedTokenAddress?.toLowerCase() &&
+    selectedChainId &&
+    token.chainId === selectedChainId;
+
   return (
-    <div
-      className={`token-picker-container ${
-        token.address.toLowerCase() === selectedTokenAddress?.toLowerCase() &&
-        selectedChainId &&
-        token.chainId === selectedChainId
-          ? "bg-t_bg_tertiary bg-opacity-10"
-          : ""
-      }`}
-      onClick={onClick}
-    >
-      <TokenLogoWithChain
-        token={token}
-        chain={chain}
-        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">
-        <div className="text-left">
-          <div className="text-sm font-medium text-ellipsis text-t_text_primary flex items-center gap-1">
-            {token.name}
-            {integrationConfig?.highlightedDstTokens?.includes(token.symbol) &&
-              panelType === "destination" && (
+    <div className="pb-2">
+      <div
+        className={`flex gap-3 items-center p-3 sm:p-4 rounded-xl cursor-pointer bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/[0.02] bg-[rgba(40,40,40,0.15)] hover:bg-t_bg_tertiary hover:bg-opacity-10 transition-colors ${
+          isSelected ? "!bg-t_bg_tertiary !bg-opacity-10" : ""
+        }`}
+        onClick={onClick}
+      >
+        <div className={`shrink-0 ${resetWarning ? "opacity-40" : ""}`}>
+          <TokenLogoWithChain
+            token={token}
+            chain={chain}
+            tokenLogoClassName="min-w-10 w-10 h-10"
+            generatedLogoClassName="min-w-10 w-10 h-10 text-[16px]"
+            chainLogoClassName="w-[18px]"
+          />
+        </div>
+        <div className="flex justify-between items-center gap-2 w-full min-w-0">
+          <div
+            className={`text-left min-w-0 ${resetWarning ? "opacity-40" : ""}`}
+          >
+            <div className="text-sm font-medium leading-5 tracking-[0.01em] text-t_text_primary flex items-center gap-1">
+              {token.symbol}
+              {integrationConfig?.highlightedDstTokens?.includes(
+                token.symbol,
+              ) &&
+                panelType === "destination" && (
+                  <div
+                    className="flex items-center justify-center text-t_text_primary rounded-full w-3.5 h-3.5 text-xs"
+                    title="AI-powered token"
+                  >
+                    <StarsIcon />
+                  </div>
+                )}
+            </div>
+            <div className="flex gap-2 items-center text-xs leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-50">
+              <span className="whitespace-nowrap">
+                {chain?.displayName || token.name}
+              </span>
+              {!resetWarning && (
+                <>
+                  <span className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0" />
+                  <span className="whitespace-nowrap hidden sm:block">
+                    {shortAddress(token.address)}
+                  </span>
+                </>
+              )}
+            </div>
+          </div>
+
+          <div className="text-right shrink-0">
+            {address && isFetchingBalances ? (
+              <Skeleton className="w-[48px] h-[12px]" />
+            ) : (
+              token.balance &&
+              token.decimals &&
+              address && (
                 <div
-                  className={`flex items-center justify-center text-white rounded-full border-t_bg_secondary ${"w-3.5 h-3.5 text-xs"}`}
-                  title="AI-powered token"
+                  className={`text-sm font-medium leading-5 tracking-[0.01em] text-t_text_primary ${
+                    resetWarning ? "opacity-40" : ""
+                  }`}
                 >
-                  <StarsIcon />
+                  {token.balance.eq(0) || tokenBalance! > 0.0001
+                    ? weiToHumanReadable({
+                        amount: token.balance.toString(),
+                        decimals: token.decimals,
+                        precisionFractionalPlaces: 4,
+                      })
+                    : "<0.0001"}
                 </div>
-              )}
-          </div>
-          <div className="text-xs text-t_text_primary text-opacity-50 font-medium">
-            {token.symbol}
-          </div>
-        </div>
-        {token.balance && token.decimals && address && !isFetchingBalances && (
-          <div className="text-right">
-            <div className="text-xs text-t_text_primary">
-              {token.balance.eq(0) || tokenBalance! > 0.0001
-                ? weiToHumanReadable({
-                    amount: token.balance.toString(),
-                    decimals: token.decimals,
-                    precisionFractionalPlaces: 4,
-                  })
-                : "<0.0001"}
-            </div>
-            {hasBalance && (
-              <div className="text-xs text-t_text_primary text-opacity-50">
-                {tokenValueUsd ? `$${tokenValueUsd.toFixed(2)}` : "$ -"}
+              )
+            )}
+            {resetWarning ? (
+              <div className="flex items-center justify-end gap-1.5 text-[#D77F02]">
+                <WarningIcon className="w-3.5 h-3.5 shrink-0" />
+                <span className="text-xs leading-[18px] tracking-[0.01em] whitespace-nowrap">
+                  <span className="sm:hidden">
+                    {resetWarning === "source"
+                      ? "Source will reset."
+                      : "Destination will reset."}
+                  </span>
+                  <span className="hidden sm:inline">
+                    {resetWarning === "source"
+                      ? "Source will reset after selection."
+                      : "Destination will reset after selection."}
+                  </span>
+                </span>
               </div>
+            ) : (
+              !isFetchingBalances &&
+              hasBalance &&
+              address && (
+                <div className="text-xs leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-50">
+                  {tokenValueUsd ? `${tokenValueUsd.toFixed(2)} USD` : "-"}
+                </div>
+              )
             )}
           </div>
-        )}
-
-        {address && isFetchingBalances && (
-          <div>
-            <Skeleton className="w-[48px] h-[12px]" />
-          </div>
-        )}
+        </div>
       </div>
     </div>
   );