@xswap-link/sdk 0.14.0 → 0.15.0

package/localTheme.ts

@@ -50,19 +50,21 @@ const lightThemeStyles: ModalIntegrationThemeStyles = {
 };
 
 const darkThemeStyles: ModalIntegrationThemeStyles = {
-  mainAccentLight: "#3681C6",
-  mainAccentDark: "#2B4A9D",
+  // Lavender CTA gradient from the swap-v2 design
+  mainAccentLight: "#D3DAF2",
+  mainAccentDark: "#B8C1E9",
   bgPrimary: "#020202",
   bgSecondary: "#0F0F0F",
   bgTertiary: "#ffffff",
   textPrimary: "#FFFFFF",
   textSecondary: "#3681C6",
   textRed: "#F44336",
-  textOrange: "#FFCA28",
+  textOrange: "#F46F28",
   textGreen: "#4CAF50",
   clickSecondary: "#3681C6",
   clickTertiary: "#FFFFFF",
-  buttonPrText: "#FFFFFF",
+  // Dark text sits on the light lavender primary button
+  buttonPrText: "#020202",
   buttonPrOffBg: "#272727",
   buttonPrOffText: "#90A4AE",
   labelText: "#FFFFFF",

package/package.json

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

package/src/assets/icons/AdjustmentsIcon.tsx

@@ -3,16 +3,14 @@ export const AdjustmentsIcon = ({ className }: { className?: string }) => {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      // The 20px-wide artwork is clipped to a 16px box in the design,
+      // so the slider lines run edge to edge.
+      viewBox="2 0 16 10.4"
       stroke="currentColor"
+      strokeLinejoin="round"
       className={className}
     >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
-      />
+      <path d="M8.4 2.1L20 2.1M5.2 2.1C5.2 1.21634 5.91635 0.5 6.8 0.5C7.68366 0.5 8.4 1.21635 8.4 2.1C8.4 2.98366 7.68366 3.7 6.8 3.7C5.91635 3.7 5.2 2.98365 5.2 2.1ZM0 2.1H5.2M14.8 8.3L20 8.3M11.6 8.3C11.6 7.41634 12.3163 6.7 13.2 6.7C14.0837 6.7 14.8 7.41635 14.8 8.3C14.8 9.18366 14.0837 9.9 13.2 9.9C12.3163 9.9 11.6 9.18366 11.6 8.3ZM6.8 8.3H11.6" />
     </svg>
   );
 };

package/src/assets/icons/ChainlinkMarkIcon.tsx

@@ -1,15 +1,14 @@
 export const ChainlinkMarkIcon = () => {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="17.35"
+      height="20"
+      viewBox="0 0 17.35 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect width="24" height="24" rx="4" fill="white" fillOpacity="0.03" />
       <path
-        d="M12.0667 5L6 8.5V15.5L12.0667 19L18.1333 15.5V8.5L12.0667 5ZM15.5632 14.0166L12.0678 16.0331L8.57239 14.0166V9.98344L12.0678 7.96688L15.5632 9.98344V14.0166Z"
+        d="M8.67502 0L0 5L5.56362e-07 15L8.67502 20L17.35 15L17.35 5L8.67502 0ZM13.6749 12.8808L8.67663 15.7615L3.67838 12.8808L3.67838 7.1192L8.67663 4.2384L13.6749 7.1192L13.6749 12.8808Z"
         fill="#0847F7"
       />
     </svg>

package/src/assets/icons/CheckCircleThinIcon.tsx

@@ -0,0 +1,22 @@
+export const CheckCircleThinIcon = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM15.0195 8L9.96582 13.0801L7.65137 10.7539H6.54102L6.5 12.5166L6.54102 12.5576V12.8184H6.80078L9.96582 16L15.8711 10.0654H17.5V8H15.0195Z"
+      />
+    </svg>
+  );
+};

package/src/assets/icons/ChevronDownThinIcon.tsx

@@ -0,0 +1,39 @@
+export const ChevronDownThinIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path d="M16 9.75V10.2509L12.7071 13.5438C12.3166 13.9343 11.6834 13.9343 11.2929 13.5438L8 10.2509V9.75" />
+    </svg>
+  );
+};
+
+// Smaller variant used inside the wallet address chip; the glyph-to-box
+// ratio differs from the 24px icon, so it is a separate drawing.
+export const ChevronDownThinSmallIcon = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path d="M10 6.75V7.24546L8.70711 8.53836C8.31658 8.92888 7.68342 8.92888 7.29289 8.53836L6 7.24546V6.75" />
+    </svg>
+  );
+};

package/src/assets/icons/ChevronDownWideThinIcon.tsx

@@ -0,0 +1,18 @@
+export const ChevronDownWideThinIcon = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M11.9999 14.5001L6.99998 9.49994L12 10.75L17 9.49994L11.9999 14.5001Z" />
+    </svg>
+  );
+};

package/src/assets/icons/ChevronsUpDownThinIcon.tsx

@@ -0,0 +1,21 @@
+export const ChevronsUpDownThinIcon = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="9"
+      height="15.1734"
+      viewBox="0 0 9 15.1734"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path d="M8.5 10.5867V11.0876L5.20711 14.3805C4.81658 14.7711 4.18342 14.7711 3.79289 14.3805L0.5 11.0876V10.5867" />
+      <path d="M0.5 4.58671L0.5 4.08579L3.79289 0.792893C4.18342 0.402369 4.81658 0.402369 5.20711 0.792893L8.5 4.08579L8.5 4.58671" />
+    </svg>
+  );
+};

package/src/assets/icons/ClockIcon.tsx

@@ -3,16 +3,12 @@ export const ClockIcon = ({ className }: { className?: string }) => {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      viewBox="0 0 16 16"
       stroke="currentColor"
       className={className}
     >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-      />
+      <path d="M8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.0748 12.2503 15.3875 8.20117 15.4941L4.35352 11.6465C3.67047 10.924 2.67065 9.92446 1.84375 9.10742C1.42752 8.69616 1.05392 8.32896 0.78418 8.06543C0.671658 7.9555 0.576752 7.86393 0.504883 7.79395C0.614072 3.7471 3.92679 0.5 8 0.5Z" />
+      <path d="M8 4V8H10.0011" />
     </svg>
   );
 };

package/src/assets/icons/CloseIcon.tsx

@@ -3,13 +3,18 @@ import { FC } from "react";
 export const CloseIcon: FC<{ className?: string }> = ({ className }) => {
   return (
     <svg
-      height="18"
-      width="18"
+      // Native 10x9 glyph size from the design; pass className to resize
+      height="9"
+      width="10"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 10.312 8.319"
+      viewBox="0 0 10 9"
+      fill="none"
+      stroke="currentColor"
       className={className || ""}
     >
-      <path d="M6.073 4.078 10.151 0H9.093A1.87 1.87 0 0 0 7.77.548L5.157 3.162 2.543.548A1.87 1.87 0 0 0 1.22 0H.161L4.24 4.078 0 8.318h1.058a1.87 1.87 0 0 0 1.322-.547l2.777-2.777 2.776 2.777a1.869 1.869 0 0 0 1.322.548h1.058Z" />
+      {/* Hairline 1px stroke at any render size, as in the design */}
+      <path vectorEffect="non-scaling-stroke" d="M0 0.5H1L9 8.5H10" />
+      <path vectorEffect="non-scaling-stroke" d="M10 0.5H9L1 8.5H0" />
     </svg>
   );
 };

package/src/assets/icons/ErrorCircleThinIcon.tsx

@@ -0,0 +1,22 @@
+export const ErrorCircleThinIcon = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0ZM11 16V18H13V16H11ZM10.5 6V8L11 10V14H13V10L13.5 8V6H10.5Z"
+      />
+    </svg>
+  );
+};

package/src/assets/icons/LinkExternalThinIcon.tsx

@@ -0,0 +1,19 @@
+export const LinkExternalThinIcon = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M10.9226 10.9226H1.07744V1.07744H5.45455L4.3771 0H0V12H12V7.6229L10.9226 6.54545V10.9226Z" />
+      <path d="M7.07071 0L8.14815 1.07744H10.1549L7.81145 3.42088L8.57912 4.18855L10.9226 1.84512V3.83838L12 4.91582V0H7.07071Z" />
+    </svg>
+  );
+};

package/src/assets/icons/LoadingRingIcon.tsx

@@ -0,0 +1,22 @@
+export const LoadingRingIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        opacity="0.5"
+        d="M8 0.500001C12.1421 0.500001 15.5 3.85787 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85787 15.5 0.500002 12.1421 0.500002 8C0.500002 3.85787 3.85787 0.500001 8 0.500001Z"
+      />
+      <path
+        d="M1 8C1 7.08075 1.18106 6.1705 1.53284 5.32122C1.88463 4.47194 2.40024 3.70026 3.05025 3.05025C3.70026 2.40024 4.47194 1.88463 5.32122 1.53284C6.17049 1.18106 7.08075 1 8 1"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};

package/src/assets/icons/ProgressRingThinIcon.tsx

@@ -0,0 +1,29 @@
+export const ProgressRingThinIcon = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="11.5"
+        stroke="currentColor"
+        strokeOpacity="0.2"
+      />
+      {/* Progress arc keeps the fixed design blue, only the track follows currentColor */}
+      <path
+        stroke="#0747F7"
+        d="M21.3496 18.6959C20.202 20.2983 18.6618 21.5789 16.8768 22.4147C15.0919 23.2506 13.122 23.6136 11.1564 23.469C9.19071 23.3244 7.29521 22.6771 5.65176 21.589C4.0083 20.501 2.67207 19.0089 1.77129 17.2558C0.870505 15.5027 0.435407 13.5475 0.50775 11.5779C0.580093 9.60826 1.15745 7.69027 2.18441 6.00799C3.21137 4.32571 4.65347 2.93561 6.37231 1.97109C8.09114 1.00657 10.029 0.500001 12 0.500001"
+      />
+    </svg>
+  );
+};

package/src/assets/icons/SearchThinIcon.tsx

@@ -0,0 +1,15 @@
+export const SearchThinIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      className={className}
+    >
+      <path d="M9.03101 11.5355L10.4947 13H12.5M10.4947 8C10.4947 10.7614 8.25731 13 5.49735 13C2.73739 13 0.5 10.7614 0.5 8C0.5 5.23858 2.73739 3 5.49735 3C8.25731 3 10.4947 5.23858 10.4947 8Z" />
+    </svg>
+  );
+};

package/src/assets/icons/SignThinIcon.tsx

@@ -0,0 +1,15 @@
+export const SignThinIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M15.9892 5.83567L17.3734 4.45066C17.6619 4.16211 18.0533 4 18.4614 4C18.8694 4 19.2608 4.16211 19.5493 4.45066C19.8379 4.73921 20 5.13057 20 5.53864C20 5.94672 19.8379 6.33808 19.5493 6.62663L7.75954 18.4164C7.32576 18.85 6.79083 19.1686 6.20305 19.3436L4 20L4.6564 17.797C4.8314 17.2092 5.15004 16.6742 5.58357 16.2405L10 11.8244L15.9892 5.83567Z" />
+      <path d="M15.9892 5.83567L16.3427 6.18923L16.3428 6.18912L15.9892 5.83567ZM17.3734 4.45066L17.0198 4.09711L17.0197 4.09721L17.3734 4.45066ZM18.4614 4V3.5V4ZM19.5493 6.62663L19.9029 6.98018L19.5493 6.62663ZM7.75954 18.4164L8.11299 18.7701L8.1131 18.77L7.75954 18.4164ZM6.20305 19.3436L6.06038 18.8644L6.06028 18.8644L6.20305 19.3436ZM4 20L3.52082 19.8572L3.3293 20.5H4V20ZM4.6564 17.797L5.13558 17.9397L5.13561 17.9396L4.6564 17.797ZM5.58357 16.2405L5.23003 15.8869L5.22991 15.887L5.58357 16.2405ZM10 11.8244L10.3535 12.1779L10 11.8244ZM15.9892 5.83567L16.3428 6.18912L17.727 4.80411L17.3734 4.45066L17.0197 4.09721L15.6355 5.48222L15.9892 5.83567ZM17.3734 4.45066L17.7269 4.80421C17.9217 4.60943 18.1859 4.5 18.4614 4.5V4V3.5C17.9207 3.5 17.4021 3.71479 17.0198 4.09711L17.3734 4.45066ZM18.4614 4V4.5C18.7368 4.5 19.001 4.60943 19.1958 4.80421L19.5493 4.45066L19.9029 4.09711C19.5206 3.71479 19.002 3.5 18.4614 3.5V4ZM19.5493 4.45066L19.1958 4.80421C19.3906 4.999 19.5 5.26318 19.5 5.53864H20H20.5C20.5 4.99796 20.2852 4.47943 19.9029 4.09711L19.5493 4.45066ZM20 5.53864H19.5C19.5 5.81411 19.3906 6.07829 19.1958 6.27308L19.5493 6.62663L19.9029 6.98018C20.2852 6.59786 20.5 6.07933 20.5 5.53864H20ZM19.5493 6.62663L19.1958 6.27308L7.40599 18.0629L7.75954 18.4164L8.1131 18.77L19.9029 6.98018L19.5493 6.62663ZM7.75954 18.4164L7.40609 18.0628C7.03105 18.4376 6.56856 18.7131 6.06038 18.8644L6.20305 19.3436L6.34572 19.8228C7.0131 19.6241 7.62047 19.2623 8.11299 18.7701L7.75954 18.4164ZM6.20305 19.3436L6.06028 18.8644L3.85723 19.5208L4 20L4.14277 20.4792L6.34582 19.8228L6.20305 19.3436ZM4 20L4.47918 20.1428L5.13558 17.9397L4.6564 17.797L4.17722 17.6542L3.52082 19.8572L4 20ZM4.6564 17.797L5.13561 17.9396C5.28691 17.4314 5.56241 16.9689 5.93723 16.5939L5.58357 16.2405L5.22991 15.887C4.73768 16.3795 4.37588 16.9869 4.17719 17.6543L4.6564 17.797ZM4 20V20.5H12V20V19.5H4V20ZM12 20V20.5H15.1537V20V19.5H12V20ZM17.0869 20V20.5H18.59V20V19.5H17.0869V20ZM5.58357 16.2405L5.93711 16.594L10.3535 12.1779L10 11.8244L9.64646 11.4708L5.23003 15.8869L5.58357 16.2405ZM10 11.8244L10.3535 12.1779L16.3427 6.18923L15.9892 5.83567L15.6356 5.4821L9.64646 11.4708L10 11.8244ZM10 11.8244V11.3244H6.74576V11.8244V12.3244H10V11.8244ZM6.74576 9.5V10H7.04178V9.5V9H6.74576V9.5ZM8.5 8.04179H9V8H8.5H8V8.04179H8.5ZM7.04178 9.5V10C8.12328 10 9 9.12328 9 8.04179H8.5H8C8 8.57099 7.57099 9 7.04178 9V9.5ZM5.58357 10.6622H6.08357C6.08357 10.2965 6.38004 10 6.74576 10V9.5V9C5.82776 9 5.08357 9.74419 5.08357 10.6622H5.58357ZM6.74576 11.8244V11.3244C6.38004 11.3244 6.08357 11.0279 6.08357 10.6622H5.58357H5.08357C5.08357 11.5802 5.82776 12.3244 6.74576 12.3244V11.8244Z" />
+    </svg>
+  );
+};

package/src/assets/icons/WalletCheckThinIcon.tsx

@@ -0,0 +1,24 @@
+export const WalletCheckThinIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+    >
+      <rect x="3.5" y="4.5" width="17" height="15" rx="4.5" stroke="currentColor" />
+      <path
+        d="M16 6C18.7614 6 21 8.23858 21 11V15C21 17.7614 18.7614 20 16 20H8C5.23858 20 3 17.7614 3 15V11C3 8.23858 5.23858 6 8 6H16ZM4.0459 15.6104C4.05655 15.679 4.06905 15.747 4.08301 15.8145C4.05554 15.6816 4.03445 15.5464 4.02051 15.4092L4.0459 15.6104Z"
+        fill="currentColor"
+      />
+      {/* Check badge is a dark cutout over the filled wallet body, as in the design */}
+      <path
+        d="M17 10C20.3137 10 23 12.6863 23 16C23 19.3137 20.3137 22 17 22C13.6863 22 11 19.3137 11 16C11 12.6863 13.6863 10 17 10ZM18.5098 14.25L15.9834 16.79L14.8262 15.627H14.2705L14.25 16.5078L14.2705 16.5293V16.6592H14.4004L15.9834 18.25L18.9355 15.2822H19.75V14.25H18.5098Z"
+        fill="#121212"
+      />
+      <circle cx="17" cy="16" r="5.5" stroke="currentColor" />
+    </svg>
+  );
+};

package/src/assets/icons/WarningIcon.tsx

@@ -2,14 +2,17 @@ export const WarningIcon = ({ className }: { className?: string }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="currentColor"
+      viewBox="0 0 14 14"
+      fill="none"
       className={className}
     >
       <path
-        fillRule="evenodd"
-        d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
-        clipRule="evenodd"
+        d="M11 0C12.6568 6.60986e-05 14 1.34319 14 3V11C14 12.6568 12.6568 13.9999 11 14H3C1.34315 14 1.61073e-08 12.6569 0 11V3C1.28858e-07 1.34315 1.34315 0 3 0H11Z"
+        fill="#F46F28"
+      />
+      <path
+        d="M7.66699 9.66699V11H6.33301V9.66699H7.66699ZM8 3V4.33301L7.66699 5.66699V8.33301H6.33301V5.66699L6 4.33301V3H8Z"
+        fill="#0B0B0B"
       />
     </svg>
   );

package/src/assets/icons/index.ts

@@ -12,8 +12,12 @@ export * from "./CaretsUpDownIcon";
 export * from "./CashbacklIcon";
 export * from "./ChainlinkIcon";
 export * from "./ChainlinkMarkIcon";
+export * from "./CheckCircleThinIcon";
 export * from "./CheckIcon";
 export * from "./ChevronDownIcon";
+export * from "./ChevronDownThinIcon";
+export * from "./ChevronDownWideThinIcon";
+export * from "./ChevronsUpDownThinIcon";
 export * from "./ChevronUpIcon";
 export * from "./CircularProgressIcon";
 export * from "./CloseIcon";
@@ -22,6 +26,7 @@ export * from "./CopyIcon";
 export * from "./DotGreenIcon";
 export * from "./DotRedIcon";
 export * from "./DownArrorIcon";
+export * from "./ErrorCircleThinIcon";
 export * from "./ErrorIcon";
 export * from "./ErrorModalStatusIcon";
 export * from "./HelpIcon";
@@ -30,18 +35,24 @@ export * from "./HistoryIcon";
 export * from "./HourGlassIcon";
 export * from "./InfoIcon";
 export * from "./LinkExternalIcon";
+export * from "./LinkExternalThinIcon";
+export * from "./LoadingRingIcon";
 export * from "./PercentageIcon";
+export * from "./ProgressRingThinIcon";
 export * from "./RankIcon";
 export * from "./SearchIcon";
+export * from "./SearchThinIcon";
 export * from "./SettingsGradientBgIcon";
 export * from "./SettingsIcon";
 export * from "./SignIcon";
+export * from "./SignThinIcon";
 export * from "./SuccessIcon";
 export * from "./SuccessModalStatusIcon";
 export * from "./ThumbUpRoundedIcon";
 export * from "./TimerIcon";
 export * from "./TokensIcon";
 export * from "./WaitingIcon";
+export * from "./WalletCheckThinIcon";
 export * from "./WarningIcon";
 export * from "./WalletConnectIcon";
 export * from "./XMarkIcon";

package/src/components/Modal/index.tsx

@@ -7,6 +7,11 @@ import { FC, ReactNode } from "react";
  * - Modals needs to be inside all app's main contexts,
  * - Modals' need to rerender on props change.
  *
+ * Presentation follows the swap-v2 design:
+ * - sm and up: the content replaces the widget in place (fills the widget
+ *   container with the same radius), or is centered when in overlay mode,
+ * - below sm: a bottom sheet pinned to the viewport with a drag handle.
+ *
  * Usage:
  * ```
  * const [open, setOpen] = useState(false);
@@ -30,12 +35,14 @@ export const Modal: FC<{
   return (
     <div
       className={`${
-        overlay ? "fixed bg-[rgba(0,0,0,0.8)]" : "absolute"
-      } top-0 left-0 right-0 bottom-0 flex items-center justify-center z-10 ${
+        overlay
+          ? "fixed bg-[rgba(0,0,0,0.8)]"
+          : "fixed sm:absolute bg-[rgba(2,2,2,0.8)] sm:bg-transparent"
+      } top-0 left-0 right-0 bottom-0 flex flex-col justify-end sm:justify-center items-center z-10 ${
         className || ""
       }`}
       onMouseDown={(e) => {
-        if (e.target === e.currentTarget && overlay) {
+        if (e.target === e.currentTarget) {
           e.stopPropagation();
           e.nativeEvent.stopImmediatePropagation();
           e.preventDefault();
@@ -44,13 +51,11 @@ export const Modal: FC<{
       }}
     >
       <div
-        className="flex flex-col bg-t_bg_primary rounded-[20px] border border-solid border-t_text_primary border-opacity-10 p-5 sm:p-6 w-full min-w-[340px]"
-        style={{
-          height: overlay ? "600px" : "100%",
-          maxWidth: "636px",
-          maxHeight: "100%",
-        }}
+        className={`flex flex-col w-full bg-gradient-to-r from-t_bg_secondary/50 to-t_bg_secondary/50 bg-t_bg_primary border-t sm:border border-solid border-t_text_primary border-opacity-10 rounded-t-[24px] rounded-b-none sm:rounded-[32px] p-4 pt-2.5 sm:p-8 h-[85vh] max-h-full overflow-hidden ${
+          overlay ? "sm:h-[600px] sm:max-w-[636px]" : "sm:h-full"
+        }`}
       >
+        <div className="sm:hidden mx-auto mb-4 h-1 w-8 rounded-full bg-t_bg_tertiary bg-opacity-10 shrink-0" />
         {children}
       </div>
     </div>

package/src/components/PoweredBy/index.tsx

@@ -3,17 +3,15 @@ import { ChainlinkMarkIcon } from "@src/assets/icons";
 export const PoweredBy = () => {
   return (
     <div className="flex justify-end items-center">
-      <div className="flex items-center gap-2 p-2 rounded-lg bg-gradient-to-r from-t_bg_tertiary/0 to-t_bg_tertiary/5">
-        <div className="flex items-center [&_svg]:h-6 [&_svg]:w-6">
+      <div className="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-gradient-to-r from-t_bg_tertiary/0 to-t_bg_tertiary/5">
+        <div className="flex items-center [&_svg]:h-5 [&_svg]:w-auto">
           <ChainlinkMarkIcon />
         </div>
-        <p className="text-sm whitespace-nowrap leading-6">
-          <span className="text-t_text_primary text-opacity-50">
-            {`Backed By `}
-          </span>
-          <span className="text-t_text_primary text-opacity-75">
-            Chainlink.
+        <p className="text-xs whitespace-nowrap leading-5 tracking-[0.015em]">
+          <span className="text-t_text_primary text-opacity-70">
+            {`POWERED BY `}
           </span>
+          <span className="text-t_text_primary">CCIP.</span>
         </p>
       </div>
     </div>

package/src/components/Swap/Header/index.tsx

@@ -1,20 +1,18 @@
 import { useSwapContext } from "@src/context";
 import { Controls } from "./Controls";
 
-const DEFAULT_WIDGET_TITLE = "XLane.";
-
 type Props = {
   onClose: () => void;
 };
 export const Header = ({ onClose }: Props) => {
-  const { tab, integrationConfig } = useSwapContext();
+  const { tab, integrationConfig, bridgeUI } = useSwapContext();
 
   const title =
     tab === "Settings"
       ? "Preferences"
       : tab === "History"
       ? "My Activity"
-      : integrationConfig.widgetTitle || DEFAULT_WIDGET_TITLE;
+      : integrationConfig.widgetTitle || (bridgeUI ? "Bridge" : "Swap");
 
   return (
     <div className="flex justify-between items-center">