@xswap-link/sdk 0.2.1 → 0.2.2

package/package.json

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

package/src/components/TxConfigForm/PoweredBy.tsx

@@ -0,0 +1,12 @@
+import { ChainlinkCCIPIcon, XSwapBadgeIcon } from "@src/components/icons";
+
+export const PoweredBy = () => {
+  return (
+    <div className="flex justify-center items-center gap-2 my-3">
+      <span className="text-x_grey">Powered by</span>
+      <XSwapBadgeIcon />
+      <span>✕</span>
+      <ChainlinkCCIPIcon />
+    </div>
+  );
+};

package/src/components/TxConfigForm/index.tsx

@@ -1,15 +1,12 @@
 import "@src/global.css";
 import { MouseEvent, useMemo } from "react";
-import { createRoot, Root } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
-import { getWagmiConfig } from "@src/config";
+import { getWagmiConfig, xswapRoot } from "@src/config";
 import { Chain, ContractCall, Route } from "@src/models";
 import { CloseIcon } from "@src/components/icons/CloseIcon";
+import { PoweredBy } from "@src/components/TxConfigForm/PoweredBy";
 import { Form } from "./Form";
-import { ChainlinkCCIPIcon, XSwapBadgeIcon } from "../icons";
-import { version } from "../../../package.json";
-import xswapConfig from "../../../xswap.config";
 
 export type TxConfigFormProps = {
   dstChainId: string;
@@ -67,13 +64,7 @@ const TxConfigForm = ({
             >
               <CloseIcon />
             </div>
-
-            <div className="swappage__poweredby">
-              <span>Powered by</span>
-              <XSwapBadgeIcon />
-              <span>✕</span>
-              <ChainlinkCCIPIcon />
-            </div>
+            <PoweredBy />
           </div>
         </div>
       </QueryClientProvider>
@@ -111,18 +102,3 @@ export const openTxConfigForm = async ({
     throw new Error(`XSwap component error, ${err}`);
   }
 };
-
-// skip on server-side integrations
-let xswapRoot: Root;
-if (typeof document !== "undefined") {
-  const xswapStyleElement = document.createElement("link");
-  xswapStyleElement.rel = "stylesheet";
-  xswapStyleElement.type = "text/css";
-  xswapStyleElement.href = `${xswapConfig.apiUrl}/sdk/css?data={"version": "${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/{TxHistoryButton → TxStatusButton}/index.tsx

@@ -1,19 +1,20 @@
 import { FC, useMemo, useState } from "react";
-import { createRoot } from "react-dom/client";
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
   CheckIcon,
   CircularProgressIcon,
+  ArrowUpRightIcon,
+  XSwapLogo,
 } from "../icons";
-import { ArrowUpRightIcon, XSwapLogo } from "../icons";
 import { MonitoredTransaction } from "@src/models";
+import { txStatusRoot } from "@src/config";
 
 interface Props {
   transaction: MonitoredTransaction;
 }
 
-export const TxHistoryButton: FC<Props> = ({ transaction }) => {
+export const TxStatusButton: FC<Props> = ({ transaction }) => {
   const {
     fromChain,
     fromChainImage,
@@ -141,18 +142,9 @@ export const updateTransactionDoneInRenderedTransactions = (txHash: string) => {
   }
 };
 
-const historyElement = document.createElement("div");
-historyElement.setAttribute("id", "xswap-history");
-historyElement.setAttribute(
-  "class",
-  "absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50",
-);
-document.body.appendChild(historyElement);
-const txHistoryButtonRoot = createRoot(historyElement);
-
-export const renderTxHistoryButtons = () => {
+export const renderTxStatusButtons = () => {
   const buttons = renderedTransactions.map((item) => (
-    <TxHistoryButton key={item.txHash} transaction={item} />
+    <TxStatusButton key={item.txHash} transaction={item} />
   ));
-  txHistoryButtonRoot.render(buttons);
+  txStatusRoot.render(buttons);
 };

package/src/components/global.css

@@ -28,3 +28,7 @@
     border: 1px solid rgba(255, 255, 255, 0.1);
   }
 }
+
+.xswap-tx-status {
+  @apply absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50;
+}

package/src/components/index.ts

@@ -1,4 +1,4 @@
 export * from "./Alert";
 export * from "./TxConfigForm";
-export * from "./TxHistoryButton";
+export * from "./TxStatusButton";
 export * from "./Skeleton";

package/src/config/index.ts

@@ -1 +1,2 @@
 export * from "./wagmiConfig";
+export * from "./init";

package/src/config/init.ts

@@ -0,0 +1,31 @@
+import { createRoot, Root } from "react-dom/client";
+import xswapConfig from "../../xswap.config";
+import { version } from "../../package.json";
+
+export let xswapRoot: Root;
+export let txStatusRoot: Root;
+
+export const initDocument = () => {
+  if (typeof document === "undefined") {
+    throw new Error("Can't render XPay components from server side.");
+  }
+
+  fetch(`${xswapConfig.apiUrl}/sdk/css?data={"version": "${version}"}`).then(
+    async (css) => {
+      const style = document.createElement("style");
+      style.textContent = await css.text();
+      document.body.appendChild(style);
+    },
+  );
+
+  const xswapElement = document.createElement("div");
+  xswapElement.setAttribute("id", "xswap-modal");
+  document.body.appendChild(xswapElement);
+  xswapRoot = createRoot(xswapElement);
+
+  const txStatusElement = document.createElement("div");
+  txStatusElement.setAttribute("id", "xswap-tx-status");
+  txStatusElement.setAttribute("class", "xswap-tx-status");
+  document.body.appendChild(txStatusElement);
+  txStatusRoot = createRoot(txStatusElement);
+};

package/src/index.ts

@@ -1,6 +1,6 @@
-export * from "./components";
-export * from "./constants";
-export * from "./contracts";
-export * from "./models";
-export * from "./services";
-export * from "./utils";
+import { initDocument } from "@src/config/init";
+
+initDocument();
+
+export * from "@src/models";
+export { getSwapTx, monitorTransactionStatus } from "@src/services";

package/src/services/integrations/monitoring.ts

@@ -13,7 +13,7 @@ import {
 import {
   addTransactionToRenderedTransactions,
   removeTransactionFromRenderedTransactions,
-  renderTxHistoryButtons,
+  renderTxStatusButtons,
   updateTransactionDoneInRenderedTransactions,
 } from "@src/components";
 import { ADDRESSES } from "@src/contracts";
@@ -87,7 +87,7 @@ export const monitorTransactionStatus = async (
   };
 
   addTransactionToRenderedTransactions(transaction);
-  renderTxHistoryButtons();
+  renderTxStatusButtons();
 
   // start listening
   // TODO if someone will provide tx which already is done then we will never get the event. Will need to add status endpoint on backend for transactions to check if they are done or not.
@@ -113,12 +113,12 @@ export const monitorTransactionStatus = async (
 
   const onSuccess = async () => {
     updateTransactionDoneInRenderedTransactions(txHash);
-    renderTxHistoryButtons();
+    renderTxStatusButtons();
     await new Promise((resolve) =>
       setTimeout(() => resolve(true), TX_RECEIPT_STATUS_LIFETIME),
     );
     removeTransactionFromRenderedTransactions(txHash);
-    renderTxHistoryButtons();
+    renderTxStatusButtons();
   };
   xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
 };

package/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
         x_alert_light: "rgb(255,226,183)",
         x_blue: "#3396FF",
         x_green: "#66bb6a",
+        x_grey: "#ffffff80",
         x_error_background: "rgba(255,202,40,0.1)",
         x_error_border: "rgba(255,111,0,1)",
         x_blue_light: "rgba(54,129,198,1)",