@xswap-link/sdk 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @xswap-link/xswap-sdk
 
+## 0.1.4
+
+### Patch Changes
+
+- 1c0c46a: fix button display styling and logic
+
 ## 0.1.3
 
 ### Patch Changes

package/dist/index.css

@@ -1060,44 +1060,6 @@ video {
     background-color: #252525;
     border-radius: 4px;
   }
-  button {
-    width: 100%;
-  }
-  button {
-    cursor: pointer;
-  }
-  button {
-    border-radius: 1rem;
-  }
-  button {
-    border-style: none;
-  }
-  button {
-    background-image: linear-gradient(to right, var(--tw-gradient-stops));
-  }
-  button {
-    --tw-gradient-from: #3681c6 var(--tw-gradient-from-position);
-    --tw-gradient-to: rgb(54 129 198 / 0) var(--tw-gradient-to-position);
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-  }
-  button {
-    --tw-gradient-to: #2b4a9d var(--tw-gradient-to-position);
-  }
-  button {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-  button {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-  button {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-  button:disabled {
-    opacity: 0.25;
-  }
   .globalBorder {
     border: 1px solid rgba(255, 255, 255, 0.1);
   }
@@ -1123,6 +1085,9 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.disabled\:opacity-25:disabled {
+  opacity: 0.25;
+}
 @media (min-width: 640px) {
   .sm\:h-6 {
     height: 1.5rem;

package/dist/index.js

@@ -2305,8 +2305,23 @@ var Description = ({ description }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
 };
 
-// src/components/TxConfigForm/Form.tsx
+// src/components/TxConfigForm/Button.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
+var Button = ({ children, onClick, type, disabled }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "button",
+    {
+      className: "text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25",
+      onClick,
+      type,
+      disabled,
+      children
+    }
+  );
+};
+
+// src/components/TxConfigForm/Form.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Form = ({
   dstChainId,
   dstTokenAddr,
@@ -2437,13 +2452,13 @@ var Form = ({
   const handleSwitchChain = async () => {
     await switchChainAsync({ chainId: Number(srcChain?.chainId) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "form",
     {
       className: "flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-x_mobile sm:w-x_desktop",
       onSubmit: handleSubmit,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           TopBar,
           {
             signer,
@@ -2452,7 +2467,7 @@ var Form = ({
             setSettingsShown
           }
         ),
-        settingsShown && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        settingsShown && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Settings,
           {
             expressChecked,
@@ -2462,9 +2477,9 @@ var Form = ({
             setSlippage
           }
         ),
-        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          desc && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Description, { description: desc }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          desc && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Description, { description: desc }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             SwapPanel,
             {
               amount,
@@ -2479,7 +2494,7 @@ var Form = ({
               setSrcChain
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             Summary,
             {
               isGettingRoute,
@@ -2488,7 +2503,7 @@ var Form = ({
               dstChain
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             FeesDetails,
             {
               route,
@@ -2501,17 +2516,9 @@ var Form = ({
               setFeesDetailsShown
             }
           ),
-          formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ErrorField, { error: formError }),
-          srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-            "button",
-            {
-              disabled: !signer,
-              type: "button",
-              onClick: handleSwitchChain,
-              children: "Switch chain"
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-            "button",
+          formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ErrorField, { error: formError }),
+          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            Button,
             {
               type: "submit",
               disabled: !signer || !route || isGettingRoute,
@@ -2525,7 +2532,7 @@ var Form = ({
 };
 
 // src/components/TxConfigForm/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var TxConfigForm = ({
   dstChainId,
   dstTokenAddr,
@@ -2547,13 +2554,13 @@ var TxConfigForm = ({
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       className: "top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.8)] fixed flex items-center justify-center z-10",
       onClick: onBackdropClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           Form,
           {
             dstChainId,
@@ -2564,19 +2571,19 @@ var TxConfigForm = ({
             onSubmit
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "div",
           {
             className: "absolute top-7 right-4 cursor-pointer text-white",
             onClick: onClose,
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CloseIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CloseIcon, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "swappage__poweredby", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "Powered by" }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(XSwapBadgeIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "\u2715" }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChainlinkCCIPIcon, {})
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "swappage__poweredby", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Powered by" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(XSwapBadgeIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "\u2715" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChainlinkCCIPIcon, {})
         ] })
       ] })
     }
@@ -2592,7 +2599,7 @@ var openTxConfigForm = async ({
   try {
     return await new Promise((resolve) => {
       txConfigFormRoot.render(
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           TxConfigForm,
           {
             dstChainId,
@@ -2626,7 +2633,7 @@ if (typeof document !== "undefined") {
 // src/components/TxHistoryButton/index.tsx
 var import_react12 = require("react");
 var import_client2 = require("react-dom/client");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var TxHistoryButton = ({ transaction }) => {
   const {
     fromChain,
@@ -2641,15 +2648,15 @@ var TxHistoryButton = ({ transaction }) => {
     explorer
   } = transaction;
   const [isWide, setIsWide] = (0, import_react12.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
-    isWide && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
+    isWide && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
         className: `flex items-center min-w-60 sm:w-[520px] text-white h-14 px-4 text-sm gap-3 rounded-xl bg-gradient-to-r ${isDone ? "from-[rgba(76,175,80,0.1)] to-[rgba(46,125,50,0.1)] border border-solid border-x_green_dark" : "from-[rgba(54,129,198,0.1)] to-[rgba(43,74,157,0.1)] border border-solid border-x_blue_dark"}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "img",
                 {
                   className: "w-5 h-5",
@@ -2657,16 +2664,16 @@ var TxHistoryButton = ({ transaction }) => {
                   alt: "source chain"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: fromChain }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ArrowRightIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: toChain })
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromChain }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowRightIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: toChain })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: "Sent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: fromAmount }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: fromToken }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: "Sent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromAmount }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromToken }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "img",
                 {
                   className: "w-5 h-5",
@@ -2676,7 +2683,7 @@ var TxHistoryButton = ({ transaction }) => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "a",
             {
               href: explorer,
@@ -2684,22 +2691,22 @@ var TxHistoryButton = ({ transaction }) => {
               rel: "noreferrer",
               className: "no-underline cursor-pointer",
               "aria-label": "Show the transaction in the chain explorer",
-              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ArrowUpRightIcon, {}) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowUpRightIcon, {}) })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
       {
         className: `text-white rounded-xl cursor-pointer bg-gradient-to-r 
            ${isDone ? "from-[rgba(76,175,80,0.1)] to-[rgba(46,125,50,0.1)] border border-solid border-x_green_dark" : "from-[rgba(54,129,198,0.1)] to-[rgba(43,74,157,0.1)] border border-solid border-x_blue_dark"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ArrowLeftIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(XSwapLogo, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CircularProgressIcon, {}) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowLeftIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(XSwapLogo, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CircularProgressIcon, {}) })
           ] }) })
         ] })
       }
@@ -2734,14 +2741,14 @@ historyElement.setAttribute(
 document.body.appendChild(historyElement);
 var txHistoryButtonRoot = (0, import_client2.createRoot)(historyElement);
 var renderTxHistoryButtons = () => {
-  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TxHistoryButton, { transaction: item }, item.txHash));
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TxHistoryButton, { transaction: item }, item.txHash));
   txHistoryButtonRoot.render(buttons);
 };
 
 // src/components/Skeleton/index.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -2228,8 +2228,23 @@ var Description = ({ description }) => {
   return /* @__PURE__ */ jsx35("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ jsx35("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
 };
 
+// src/components/TxConfigForm/Button.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+var Button = ({ children, onClick, type, disabled }) => {
+  return /* @__PURE__ */ jsx36(
+    "button",
+    {
+      className: "text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25",
+      onClick,
+      type,
+      disabled,
+      children
+    }
+  );
+};
+
 // src/components/TxConfigForm/Form.tsx
-import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
 var Form = ({
   dstChainId,
   dstTokenAddr,
@@ -2366,7 +2381,7 @@ var Form = ({
       className: "flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-x_mobile sm:w-x_desktop",
       onSubmit: handleSubmit,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           TopBar,
           {
             signer,
@@ -2375,7 +2390,7 @@ var Form = ({
             setSettingsShown
           }
         ),
-        settingsShown && /* @__PURE__ */ jsx36(
+        settingsShown && /* @__PURE__ */ jsx37(
           Settings,
           {
             expressChecked,
@@ -2385,9 +2400,9 @@ var Form = ({
             setSlippage
           }
         ),
-        historyTabShown ? /* @__PURE__ */ jsx36(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-2", children: [
-          desc && /* @__PURE__ */ jsx36(Description, { description: desc }),
-          /* @__PURE__ */ jsx36(
+        historyTabShown ? /* @__PURE__ */ jsx37(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-2", children: [
+          desc && /* @__PURE__ */ jsx37(Description, { description: desc }),
+          /* @__PURE__ */ jsx37(
             SwapPanel,
             {
               amount,
@@ -2402,7 +2417,7 @@ var Form = ({
               setSrcChain
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             Summary,
             {
               isGettingRoute,
@@ -2411,7 +2426,7 @@ var Form = ({
               dstChain
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             FeesDetails,
             {
               route,
@@ -2424,17 +2439,9 @@ var Form = ({
               setFeesDetailsShown
             }
           ),
-          formError.length > 0 && /* @__PURE__ */ jsx36(ErrorField, { error: formError }),
-          srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ jsx36(
-            "button",
-            {
-              disabled: !signer,
-              type: "button",
-              onClick: handleSwitchChain,
-              children: "Switch chain"
-            }
-          ) : /* @__PURE__ */ jsx36(
-            "button",
+          formError.length > 0 && /* @__PURE__ */ jsx37(ErrorField, { error: formError }),
+          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ jsx37(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ jsx37(
+            Button,
             {
               type: "submit",
               disabled: !signer || !route || isGettingRoute,
@@ -2448,7 +2455,7 @@ var Form = ({
 };
 
 // src/components/TxConfigForm/index.tsx
-import { jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
 var TxConfigForm = ({
   dstChainId,
   dstTokenAddr,
@@ -2470,13 +2477,13 @@ var TxConfigForm = ({
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ jsx37(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx37(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx38(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx38(
     "div",
     {
       className: "top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.8)] fixed flex items-center justify-center z-10",
       onClick: onBackdropClick,
       children: /* @__PURE__ */ jsxs17("div", { className: "relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           Form,
           {
             dstChainId,
@@ -2487,19 +2494,19 @@ var TxConfigForm = ({
             onSubmit
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "div",
           {
             className: "absolute top-7 right-4 cursor-pointer text-white",
             onClick: onClose,
-            children: /* @__PURE__ */ jsx37(CloseIcon, {})
+            children: /* @__PURE__ */ jsx38(CloseIcon, {})
           }
         ),
         /* @__PURE__ */ jsxs17("div", { className: "swappage__poweredby", children: [
-          /* @__PURE__ */ jsx37("span", { children: "Powered by" }),
-          /* @__PURE__ */ jsx37(XSwapBadgeIcon, {}),
-          /* @__PURE__ */ jsx37("span", { children: "\u2715" }),
-          /* @__PURE__ */ jsx37(ChainlinkCCIPIcon, {})
+          /* @__PURE__ */ jsx38("span", { children: "Powered by" }),
+          /* @__PURE__ */ jsx38(XSwapBadgeIcon, {}),
+          /* @__PURE__ */ jsx38("span", { children: "\u2715" }),
+          /* @__PURE__ */ jsx38(ChainlinkCCIPIcon, {})
         ] })
       ] })
     }
@@ -2515,7 +2522,7 @@ var openTxConfigForm = async ({
   try {
     return await new Promise((resolve) => {
       txConfigFormRoot.render(
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           TxConfigForm,
           {
             dstChainId,
@@ -2549,7 +2556,7 @@ if (typeof document !== "undefined") {
 // src/components/TxHistoryButton/index.tsx
 import { useState as useState9 } from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
-import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
 var TxHistoryButton = ({ transaction }) => {
   const {
     fromChain,
@@ -2572,7 +2579,7 @@ var TxHistoryButton = ({ transaction }) => {
         children: [
           /* @__PURE__ */ jsxs18("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
             /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39(
                 "img",
                 {
                   className: "w-5 h-5",
@@ -2580,16 +2587,16 @@ var TxHistoryButton = ({ transaction }) => {
                   alt: "source chain"
                 }
               ),
-              /* @__PURE__ */ jsx38("div", { children: fromChain }),
-              /* @__PURE__ */ jsx38("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx38(ArrowRightIcon, {}) }),
-              /* @__PURE__ */ jsx38("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
-              /* @__PURE__ */ jsx38("div", { children: toChain })
+              /* @__PURE__ */ jsx39("div", { children: fromChain }),
+              /* @__PURE__ */ jsx39("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx39(ArrowRightIcon, {}) }),
+              /* @__PURE__ */ jsx39("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
+              /* @__PURE__ */ jsx39("div", { children: toChain })
             ] }),
             /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx38("div", { children: "Sent" }),
-              /* @__PURE__ */ jsx38("div", { children: fromAmount }),
-              /* @__PURE__ */ jsx38("div", { children: fromToken }),
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx39("div", { children: "Sent" }),
+              /* @__PURE__ */ jsx39("div", { children: fromAmount }),
+              /* @__PURE__ */ jsx39("div", { children: fromToken }),
+              /* @__PURE__ */ jsx39(
                 "img",
                 {
                   className: "w-5 h-5",
@@ -2599,7 +2606,7 @@ var TxHistoryButton = ({ transaction }) => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             "a",
             {
               href: explorer,
@@ -2607,22 +2614,22 @@ var TxHistoryButton = ({ transaction }) => {
               rel: "noreferrer",
               className: "no-underline cursor-pointer",
               "aria-label": "Show the transaction in the chain explorer",
-              children: /* @__PURE__ */ jsx38("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx38(ArrowUpRightIcon, {}) })
+              children: /* @__PURE__ */ jsx39("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx39(ArrowUpRightIcon, {}) })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       "div",
       {
         className: `text-white rounded-xl cursor-pointer bg-gradient-to-r 
            ${isDone ? "from-[rgba(76,175,80,0.1)] to-[rgba(46,125,50,0.1)] border border-solid border-x_green_dark" : "from-[rgba(54,129,198,0.1)] to-[rgba(43,74,157,0.1)] border border-solid border-x_blue_dark"}`,
         children: /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
-          /* @__PURE__ */ jsx38(ArrowLeftIcon, {}),
-          /* @__PURE__ */ jsx38("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ jsx38("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ jsx38(CheckIcon, {}) }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
-            /* @__PURE__ */ jsx38("div", { className: "w-5 h-5", children: /* @__PURE__ */ jsx38(XSwapLogo, {}) }),
-            /* @__PURE__ */ jsx38("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ jsx38(CircularProgressIcon, {}) })
+          /* @__PURE__ */ jsx39(ArrowLeftIcon, {}),
+          /* @__PURE__ */ jsx39("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ jsx39("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ jsx39(CheckIcon, {}) }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+            /* @__PURE__ */ jsx39("div", { className: "w-5 h-5", children: /* @__PURE__ */ jsx39(XSwapLogo, {}) }),
+            /* @__PURE__ */ jsx39("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ jsx39(CircularProgressIcon, {}) })
           ] }) })
         ] })
       }
@@ -2657,14 +2664,14 @@ historyElement.setAttribute(
 document.body.appendChild(historyElement);
 var txHistoryButtonRoot = createRoot2(historyElement);
 var renderTxHistoryButtons = () => {
-  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx38(TxHistoryButton, { transaction: item }, item.txHash));
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx39(TxHistoryButton, { transaction: item }, item.txHash));
   txHistoryButtonRoot.render(buttons);
 };
 
 // src/components/Skeleton/index.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ jsx39("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+  return /* @__PURE__ */ jsx40("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
 };
 export {
   ADDRESSES,

package/package.json

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

package/src/components/TxConfigForm/Button.tsx

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  onClick?: () => void;
+  type?: "submit" | "reset" | "button";
+  disabled?: boolean;
+}
+export const Button: FC<Props> = ({ children, onClick, type, disabled }) => {
+  return (
+    <button
+      className="text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25"
+      onClick={onClick}
+      type={type}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+};

package/src/components/TxConfigForm/Form.tsx

@@ -18,6 +18,7 @@ import { SwapPanel } from "./SwapPanel";
 import { ErrorField } from "./ErrorField";
 import { Description } from "./Description";
 import { DEFAULT_SOURCE_CHAIN_ID } from "@src/constants";
+import { Button } from "./Button";
 
 export const Form = ({
   dstChainId,
@@ -233,21 +234,19 @@ export const Form = ({
             setFeesDetailsShown={setFeesDetailsShown}
           />
           {formError.length > 0 && <ErrorField error={formError} />}
-          {srcChain && srcChain.chainId !== account.chainId?.toString() ? (
-            <button
-              disabled={!signer}
-              type="button"
-              onClick={handleSwitchChain}
-            >
+          {signer &&
+          srcChain &&
+          srcChain.chainId !== account.chainId?.toString() ? (
+            <Button type="button" onClick={handleSwitchChain}>
               Switch chain
-            </button>
+            </Button>
           ) : (
-            <button
+            <Button
               type="submit"
               disabled={!signer || !route || isGettingRoute}
             >
               Submit
-            </button>
+            </Button>
           )}
         </div>
       )}

package/src/components/global.css

@@ -24,10 +24,6 @@
     border-radius: 4px;
   }
 
-  button {
-    @apply text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25;
-  }
-
   .globalBorder {
     border: 1px solid rgba(255, 255, 255, 0.1);
   }