@xswap-link/sdk 0.1.3 → 0.2.0

package/.github/workflows/publish.yml

@@ -27,11 +27,30 @@ jobs:
 
       - run: pnpm install
       - run: pnpm install react@18.2.0 react-dom@18.2.0 @types/react@18.2.0 @types/react-dom@18.2.0
+
       - name: Create Release Pull Request or Publish
         id: changesets
-        uses: changesets/action@v1
+        uses: xswap-link/changesets-action@v1
         with:
           publish: pnpm run release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Get latest created release info
+        if: steps.changesets.outputs.published == 'true'
+        id: latest_release_info
+        uses: jossef/action-latest-release-info@v1.2.1
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+
+      - name: Publish index.css
+        if: steps.changesets.outputs.published == 'true'
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.latest_release_info.outputs.upload_url }}
+          asset_path: ./dist/index.css
+          asset_name: index.css
+          asset_content_type: text/plain

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @xswap-link/xswap-sdk
 
+## 0.2.0
+
+### Minor Changes
+
+- 3fe79fb: publish index.css while releasing new version and append css element automatically so an integrator doesn't have to
+
+## 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

@@ -995,14 +995,12 @@ var import_react = require("react");
 var useDebounce = (value, delay) => {
   const timeoutRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
-    if (timeoutRef.current)
-      clearTimeout(timeoutRef.current);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(() => {
       setValue(value);
     }, delay);
     return () => {
-      if (timeoutRef.current)
-        clearTimeout(timeoutRef.current);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
   }, [value, delay]);
   const [debouncedValue, setValue] = (0, import_react.useState)(value);
@@ -1575,8 +1573,7 @@ var History = ({ signer, supportedChains }) => {
             continue;
           }
           let status;
-          if (entry.failed)
-            status = "REVERTED";
+          if (entry.failed) status = "REVERTED";
           if (!!entry.target) {
             status = "DONE";
           } else {
@@ -1607,8 +1604,7 @@ var History = ({ signer, supportedChains }) => {
     }
   }, [signer, getHistory]);
   (0, import_react3.useEffect)(() => {
-    if (!historyLoadedOnce)
-      fetchHistory();
+    if (!historyLoadedOnce) fetchHistory();
     const timer = setInterval(() => {
       fetchHistory();
     }, 6e4);
@@ -2092,10 +2088,8 @@ var import_bignumber3 = __toESM(require("bignumber.js"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var BalanceComponent = ({ srcToken, balances }) => {
   const balanceText = (0, import_react8.useMemo)(() => {
-    if (!balances || !srcToken)
-      return "0";
-    if (balances[srcToken.address]?.toString() === "0")
-      return "0";
+    if (!balances || !srcToken) return "0";
+    if (balances[srcToken.address]?.toString() === "0") return "0";
     const fullHumanReadable = weiToHumanReadable({
       amount: balances[srcToken.address]?.toString() || "0",
       decimals: srcToken.decimals,
@@ -2179,8 +2173,7 @@ var SwapPanel = ({
             className: "p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis",
             value: amount,
             onChange: (e) => {
-              if (e.target.value === ".")
-                return;
+              if (e.target.value === ".") return;
               if (NUMBER_INPUT_REGEX.test(e.target.value)) {
                 setAmount(e.target.value.replace(/,/g, "."));
               }
@@ -2305,8 +2298,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,
@@ -2431,19 +2439,18 @@ var Form = ({
   }, [srcChain, signer]);
   const handleSubmit = (event) => {
     event.preventDefault();
-    if (route)
-      onSubmit(route);
+    if (route) onSubmit(route);
   };
   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 +2459,7 @@ var Form = ({
             setSettingsShown
           }
         ),
-        settingsShown && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        settingsShown && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Settings,
           {
             expressChecked,
@@ -2462,9 +2469,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 +2486,7 @@ var Form = ({
               setSrcChain
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             Summary,
             {
               isGettingRoute,
@@ -2488,7 +2495,7 @@ var Form = ({
               dstChain
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             FeesDetails,
             {
               route,
@@ -2501,17 +2508,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,
@@ -2524,8 +2523,11 @@ var Form = ({
   );
 };
 
+// package.json
+var version = "0.2.0";
+
 // 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 +2549,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 +2566,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, {})
         ] })
       ] })
     }
@@ -2591,8 +2593,8 @@ var openTxConfigForm = async ({
 }) => {
   try {
     return await new Promise((resolve) => {
-      txConfigFormRoot.render(
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      xswapRoot.render(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           TxConfigForm,
           {
             dstChainId,
@@ -2602,10 +2604,10 @@ var openTxConfigForm = async ({
             supportedChains,
             onSubmit: (route) => {
               resolve(route);
-              txConfigFormRoot.render("");
+              xswapRoot.render("");
             },
             onClose: () => {
-              txConfigFormRoot.render("");
+              xswapRoot.render("");
             }
           }
         )
@@ -2615,18 +2617,23 @@ var openTxConfigForm = async ({
     throw new Error(`XSwap component error, ${err}`);
   }
 };
-var txConfigFormRoot;
+var xswapRoot;
 if (typeof document !== "undefined") {
-  const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "xswap-modal");
-  document.body.appendChild(xswapElement);
-  txConfigFormRoot = (0, import_client.createRoot)(xswapElement);
+  const xswapStyleElement = document.createElement("link");
+  xswapStyleElement.rel = "stylesheet";
+  xswapStyleElement.type = "text/css";
+  xswapStyleElement.href = `${xswap_config_default.apiUrl}/sdk/css/${version}`;
+  document.head.appendChild(xswapStyleElement);
+  const xswapModalElement = document.createElement("div");
+  xswapModalElement.setAttribute("id", "xswap-modal");
+  document.body.appendChild(xswapModalElement);
+  xswapRoot = (0, import_client.createRoot)(xswapModalElement);
 }
 
 // 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

@@ -1,8 +1,7 @@
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
+  if (typeof require !== "undefined") return require.apply(this, arguments);
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
@@ -918,14 +917,12 @@ import { useEffect, useRef, useState } from "react";
 var useDebounce = (value, delay) => {
   const timeoutRef = useRef(null);
   useEffect(() => {
-    if (timeoutRef.current)
-      clearTimeout(timeoutRef.current);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(() => {
       setValue(value);
     }, delay);
     return () => {
-      if (timeoutRef.current)
-        clearTimeout(timeoutRef.current);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
   }, [value, delay]);
   const [debouncedValue, setValue] = useState(value);
@@ -1498,8 +1495,7 @@ var History = ({ signer, supportedChains }) => {
             continue;
           }
           let status;
-          if (entry.failed)
-            status = "REVERTED";
+          if (entry.failed) status = "REVERTED";
           if (!!entry.target) {
             status = "DONE";
           } else {
@@ -1530,8 +1526,7 @@ var History = ({ signer, supportedChains }) => {
     }
   }, [signer, getHistory]);
   useEffect2(() => {
-    if (!historyLoadedOnce)
-      fetchHistory();
+    if (!historyLoadedOnce) fetchHistory();
     const timer = setInterval(() => {
       fetchHistory();
     }, 6e4);
@@ -2015,10 +2010,8 @@ import BigNumber3 from "bignumber.js";
 import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
 var BalanceComponent = ({ srcToken, balances }) => {
   const balanceText = useMemo5(() => {
-    if (!balances || !srcToken)
-      return "0";
-    if (balances[srcToken.address]?.toString() === "0")
-      return "0";
+    if (!balances || !srcToken) return "0";
+    if (balances[srcToken.address]?.toString() === "0") return "0";
     const fullHumanReadable = weiToHumanReadable({
       amount: balances[srcToken.address]?.toString() || "0",
       decimals: srcToken.decimals,
@@ -2102,8 +2095,7 @@ var SwapPanel = ({
             className: "p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis",
             value: amount,
             onChange: (e) => {
-              if (e.target.value === ".")
-                return;
+              if (e.target.value === ".") return;
               if (NUMBER_INPUT_REGEX.test(e.target.value)) {
                 setAmount(e.target.value.replace(/,/g, "."));
               }
@@ -2228,8 +2220,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,
@@ -2354,8 +2361,7 @@ var Form = ({
   }, [srcChain, signer]);
   const handleSubmit = (event) => {
     event.preventDefault();
-    if (route)
-      onSubmit(route);
+    if (route) onSubmit(route);
   };
   const handleSwitchChain = async () => {
     await switchChainAsync({ chainId: Number(srcChain?.chainId) });
@@ -2366,7 +2372,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 +2381,7 @@ var Form = ({
             setSettingsShown
           }
         ),
-        settingsShown && /* @__PURE__ */ jsx36(
+        settingsShown && /* @__PURE__ */ jsx37(
           Settings,
           {
             expressChecked,
@@ -2385,9 +2391,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 +2408,7 @@ var Form = ({
               setSrcChain
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             Summary,
             {
               isGettingRoute,
@@ -2411,7 +2417,7 @@ var Form = ({
               dstChain
             }
           ),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             FeesDetails,
             {
               route,
@@ -2424,17 +2430,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,
@@ -2447,8 +2445,11 @@ var Form = ({
   );
 };
 
+// package.json
+var version = "0.2.0";
+
 // 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 +2471,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 +2488,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, {})
         ] })
       ] })
     }
@@ -2514,8 +2515,8 @@ var openTxConfigForm = async ({
 }) => {
   try {
     return await new Promise((resolve) => {
-      txConfigFormRoot.render(
-        /* @__PURE__ */ jsx37(
+      xswapRoot.render(
+        /* @__PURE__ */ jsx38(
           TxConfigForm,
           {
             dstChainId,
@@ -2525,10 +2526,10 @@ var openTxConfigForm = async ({
             supportedChains,
             onSubmit: (route) => {
               resolve(route);
-              txConfigFormRoot.render("");
+              xswapRoot.render("");
             },
             onClose: () => {
-              txConfigFormRoot.render("");
+              xswapRoot.render("");
             }
           }
         )
@@ -2538,18 +2539,23 @@ var openTxConfigForm = async ({
     throw new Error(`XSwap component error, ${err}`);
   }
 };
-var txConfigFormRoot;
+var xswapRoot;
 if (typeof document !== "undefined") {
-  const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "xswap-modal");
-  document.body.appendChild(xswapElement);
-  txConfigFormRoot = createRoot(xswapElement);
+  const xswapStyleElement = document.createElement("link");
+  xswapStyleElement.rel = "stylesheet";
+  xswapStyleElement.type = "text/css";
+  xswapStyleElement.href = `${xswap_config_default.apiUrl}/sdk/css/${version}`;
+  document.head.appendChild(xswapStyleElement);
+  const xswapModalElement = document.createElement("div");
+  xswapModalElement.setAttribute("id", "xswap-modal");
+  document.body.appendChild(xswapModalElement);
+  xswapRoot = createRoot(xswapModalElement);
 }
 
 // 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 +2578,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 +2586,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 +2605,7 @@ var TxHistoryButton = ({ transaction }) => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             "a",
             {
               href: explorer,
@@ -2607,22 +2613,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 +2663,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.2.0",
   "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/TxConfigForm/index.tsx

@@ -8,6 +8,8 @@ import { Chain, ContractCall, Route } from "@src/models";
 import { CloseIcon } from "@src/components/icons/CloseIcon";
 import { Form } from "./Form";
 import { ChainlinkCCIPIcon, XSwapBadgeIcon } from "../icons";
+import { version } from "../../../package.json";
+import xswapConfig from "../../../xswap.config";
 
 export type TxConfigFormProps = {
   dstChainId: string;
@@ -46,34 +48,34 @@ const TxConfigForm = ({
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-    <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}
-    >
-      <div className="relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]">
-        <Form
-          dstChainId={dstChainId}
-          dstTokenAddr={dstTokenAddr}
-          customContractCalls={customContractCalls}
-          desc={desc}
-          supportedChains={supportedChains}
-          onSubmit={onSubmit}
-        />
         <div
-          className="absolute top-7 right-4 cursor-pointer text-white"
-          onClick={onClose}
+          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}
         >
-          <CloseIcon />
-        </div>
+          <div className="relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]">
+            <Form
+              dstChainId={dstChainId}
+              dstTokenAddr={dstTokenAddr}
+              customContractCalls={customContractCalls}
+              desc={desc}
+              supportedChains={supportedChains}
+              onSubmit={onSubmit}
+            />
+            <div
+              className="absolute top-7 right-4 cursor-pointer text-white"
+              onClick={onClose}
+            >
+              <CloseIcon />
+            </div>
 
-        <div className="swappage__poweredby">
-          <span>Powered by</span>
-          <XSwapBadgeIcon />
-          <span>✕</span>
-          <ChainlinkCCIPIcon />
+            <div className="swappage__poweredby">
+              <span>Powered by</span>
+              <XSwapBadgeIcon />
+              <span>✕</span>
+              <ChainlinkCCIPIcon />
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
       </QueryClientProvider>
     </WagmiProvider>
   );
@@ -88,7 +90,7 @@ export const openTxConfigForm = async ({
 }: TxConfigFormProps): Promise<Route> => {
   try {
     return await new Promise((resolve) => {
-      txConfigFormRoot.render(
+      xswapRoot.render(
         <TxConfigForm
           dstChainId={dstChainId}
           dstTokenAddr={dstTokenAddr}
@@ -97,10 +99,10 @@ export const openTxConfigForm = async ({
           supportedChains={supportedChains}
           onSubmit={(route) => {
             resolve(route);
-            txConfigFormRoot.render("");
+            xswapRoot.render("");
           }}
           onClose={() => {
-            txConfigFormRoot.render("");
+            xswapRoot.render("");
           }}
         />,
       );
@@ -111,10 +113,16 @@ export const openTxConfigForm = async ({
 };
 
 // skip on server-side integrations
-let txConfigFormRoot: Root;
+let xswapRoot: Root;
 if (typeof document !== "undefined") {
-  const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "xswap-modal");
-  document.body.appendChild(xswapElement);
-  txConfigFormRoot = createRoot(xswapElement);
+  const xswapStyleElement = document.createElement("link");
+  xswapStyleElement.rel = "stylesheet";
+  xswapStyleElement.type = "text/css";
+  xswapStyleElement.href = `${xswapConfig.apiUrl}/sdk/css/${version}`;
+  document.head.appendChild(xswapStyleElement);
+
+  const xswapModalElement = document.createElement("div");
+  xswapModalElement.setAttribute("id", "xswap-modal");
+  document.body.appendChild(xswapModalElement);
+  xswapRoot = createRoot(xswapModalElement);
 }

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);
   }