@xswap-link/sdk 0.10.5 → 0.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -45,7 +45,7 @@
     "notistack": "^3.0.1",
     "react-error-boundary": "^4.1.0",
     "react-virtuoso": "^4.7.12",
-    "viem": "~2.22.12",
+    "viem": "~2.29.1",
     "wagmi": "^2.14.9"
   },
   "devDependencies": {

package/src/assets/icons/StarsIcon.tsx

@@ -0,0 +1,18 @@
+export const StarsIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.89761 2.45159L5.12155 4.38335C4.92404 4.875 4.56316 5.26745 4.11108 5.48225L2.33478 6.32623L4.11108 7.17021C4.56316 7.38501 4.92404 7.77746 5.12155 8.26911L5.89761 10.2009L6.67367 8.26911C6.87118 7.77746 7.23206 7.38501 7.68414 7.17021L9.46044 6.32623L7.68414 5.48225C7.23206 5.26745 6.87118 4.875 6.67367 4.38335L5.89761 2.45159ZM11.6352 7.3349C11.4478 7.35272 11.2681 7.47472 11.1863 7.70089L10.5417 9.48369C10.4927 9.61935 10.3985 9.72999 10.2779 9.79365L8.66756 10.6438C8.26644 10.8556 8.26644 11.477 8.66756 11.6888L10.2779 12.539C10.3985 12.6026 10.4927 12.7133 10.5417 12.8489L11.1863 14.6317C11.3639 15.1228 12.0028 15.1228 12.1804 14.6317L12.825 12.8489C12.874 12.7133 12.9682 12.6026 13.0888 12.539L14.6992 11.6888C15.1003 11.477 15.1003 10.8556 14.6992 10.6438L13.0888 9.79365C12.9682 9.72999 12.874 9.61935 12.825 9.48369L12.1804 7.70089C12.0846 7.43603 11.8546 7.31403 11.6352 7.3349ZM8.11177 8.23467C7.90628 8.33231 7.74225 8.51069 7.65247 8.73417L6.71328 11.072C6.40235 11.8459 5.39287 11.846 5.08194 11.072L4.14275 8.73417C4.05297 8.51069 3.88894 8.33231 3.68344 8.23467L1.53375 7.21328C0.822083 6.87514 0.822082 5.77732 1.53375 5.43918L3.68344 4.41779C3.88894 4.32015 4.05297 4.14177 4.14275 3.91829L5.08194 1.58047C5.39287 0.806512 6.40235 0.806511 6.71328 1.58047L7.65247 3.91829C7.74225 4.14177 7.90628 4.32015 8.11177 4.41779L10.2615 5.43918C10.6624 5.6297 10.8375 6.06138 10.7866 6.46247C10.7472 6.77325 10.5722 7.06566 10.2615 7.21328L8.11177 8.23467ZM11.6834 9.50062L11.5358 9.90876C11.3886 10.3157 11.1062 10.6477 10.7444 10.8386L10.1237 11.1663L10.7444 11.494C11.1062 11.6849 11.3886 12.0169 11.5358 12.4239L11.6834 12.832L11.8309 12.4239C11.9781 12.0169 12.2606 11.6849 12.6223 11.494L13.243 11.1663L12.6223 10.8386C12.2606 10.6477 11.9781 10.3157 11.8309 9.90876L11.6834 9.50062Z"
+        fill="white"
+      ></path>
+    </svg>
+  );
+};

package/src/assets/icons/index.ts

@@ -41,3 +41,4 @@ export * from "./XMarkIcon";
 export * from "./XPowerIcon";
 export * from "./XSwapBadgeIcon";
 export * from "./XSwapLogo";
+export * from "./StarsIcon";

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

@@ -1,4 +1,6 @@
+import { StarsIcon } 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";
@@ -11,14 +13,21 @@ type Props = {
   selectedTokenAddress: string | undefined;
   selectedChainId: string | undefined;
   onClick: () => void;
+  panelType: SwapPanelType;
 };
 export const TokenItem = ({
   token,
   selectedTokenAddress,
   onClick,
   selectedChainId,
+  panelType,
 }: Props) => {
-  const { supportedChains, tokenPrices, isFetchingBalances } = useSwapContext();
+  const {
+    supportedChains,
+    tokenPrices,
+    isFetchingBalances,
+    integrationConfig,
+  } = useSwapContext();
   const { address } = useAccount();
 
   const chain = useMemo(
@@ -66,8 +75,17 @@ export const TokenItem = ({
       />
       <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">
+          <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={`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"
+                >
+                  <StarsIcon />
+                </div>
+              )}
           </div>
           <div className="text-xs text-t_text_primary text-opacity-50 font-medium">
             {token.symbol}

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

@@ -518,6 +518,7 @@ export const TokenPicker = ({
                     return (
                       allTokens[index] && (
                         <TokenItem
+                          panelType={type}
                           token={allTokens[index]}
                           selectedChainId={chain?.chainId}
                           selectedTokenAddress={selectedTokenAddress}

package/src/components/TxConfigForm/index.tsx

@@ -27,6 +27,7 @@ export type TxConfigFormPayload = Omit<
   supportedChains: Chain[];
   integratorFee?: number;
   integratorFeeReceiverAddress?: string;
+  highlightedDstTokens?: string[];
 };
 
 type TxConfigFormProps = TxConfigFormPayload &
@@ -131,6 +132,7 @@ export const TxConfigForm = (props: TxConfigFormProps) => {
     override,
     integratorFee,
     integratorFeeReceiverAddress,
+    highlightedDstTokens,
   } = normalizedProps;
 
   const onBackdropClick = (e: MouseEvent) => {
@@ -193,6 +195,7 @@ export const TxConfigForm = (props: TxConfigFormProps) => {
                 onConnectWallet,
                 integratorFee,
                 integratorFeeReceiverAddress,
+                highlightedDstTokens,
               }}
               supportedChains={supportedChains}
               wagmiConfig={wagmiConfig}

package/src/components/TxWidgetWC/index.tsx

@@ -39,6 +39,7 @@ const TxWidget = ({
   override,
   integratorFee,
   integratorFeeReceiverAddress,
+  highlightedDstTokens,
 }: WidgetIntegrationPayload) => {
   const [loading, setLoading] = useState(true);
   const [supportedChains, setSupportedChains] = useState<Chain[]>([]);
@@ -112,6 +113,7 @@ const TxWidget = ({
           override={override}
           integratorFee={integratorFee}
           integratorFeeReceiverAddress={integratorFeeReceiverAddress}
+          highlightedDstTokens={highlightedDstTokens}
         />
       )}
     </>
@@ -158,6 +160,7 @@ export const createTxWidgetWC = () => {
       override: "json",
       integratorFee: "number",
       integratorFeeReceiverAddress: "string",
+      highlightedDstTokens: "json",
     },
   });
 
@@ -198,4 +201,5 @@ export type TxWidgetWCAttributes = {
   "integrator-fee-receiver-address":
     | WidgetIntegrationPayload["integratorFeeReceiverAddress"]
     | undefined;
+  "highlighted-dst-tokens": string | undefined;
 };

package/src/components/TxWidgetWCWrapped/index.tsx

@@ -50,6 +50,7 @@ export const TxWidgetWCWrapped = ({
   override,
   integratorFee,
   integratorFeeReceiverAddress,
+  highlightedDstTokens,
 }: WidgetIntegrationPayload) => {
   useEffect(() => {
     // We couldn't find a way to pass a function to the web component created by @r2wc/core.
@@ -90,6 +91,7 @@ export const TxWidgetWCWrapped = ({
       override={JSON.stringify(override)}
       integrator-fee={integratorFee}
       integrator-fee-receiver-address={integratorFeeReceiverAddress}
+      highlighted-dst-tokens={JSON.stringify(highlightedDstTokens)}
     ></xpay-widget>
   );
 };

package/src/models/payloads/ModalIntegrationPayload.ts

@@ -70,4 +70,5 @@ export type ModalIntegrationPayload = {
   };
   integratorFee?: number;
   integratorFeeReceiverAddress?: string;
+  highlightedDstTokens?: string[];
 };

package/src/models/payloads/WidgetIntegrationPayload.ts

@@ -32,4 +32,5 @@ export type WidgetIntegrationPayload = {
   };
   integratorFee?: number;
   integratorFeeReceiverAddress?: string;
+  highlightedDstTokens?: string[];
 };

package/src/services/integrations/transactions.ts

@@ -25,6 +25,7 @@ export const openTransactionModal = async ({
   onSrcTokenChange,
   onSrcChainChange,
   bridge,
+  highlightedDstTokens,
 }: ModalIntegrationPayload) => {
   const supportedChains: Chain[] = (await getChains()).filter(
     ({ web3Environment, swapSupported }) =>
@@ -63,6 +64,7 @@ export const openTransactionModal = async ({
     onSrcTokenChange,
     onSrcChainChange,
     bridge,
+    highlightedDstTokens,
   });
 };