@xswap-link/sdk 0.1.4 → 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,11 @@
 # @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

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, "."));
               }
@@ -2446,8 +2439,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) });
@@ -2531,6 +2523,9 @@ var Form = ({
   );
 };
 
+// package.json
+var version = "0.2.0";
+
 // src/components/TxConfigForm/index.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var TxConfigForm = ({
@@ -2598,7 +2593,7 @@ var openTxConfigForm = async ({
 }) => {
   try {
     return await new Promise((resolve) => {
-      txConfigFormRoot.render(
+      xswapRoot.render(
         /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           TxConfigForm,
           {
@@ -2609,10 +2604,10 @@ var openTxConfigForm = async ({
             supportedChains,
             onSubmit: (route) => {
               resolve(route);
-              txConfigFormRoot.render("");
+              xswapRoot.render("");
             },
             onClose: () => {
-              txConfigFormRoot.render("");
+              xswapRoot.render("");
             }
           }
         )
@@ -2622,12 +2617,17 @@ 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

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, "."));
               }
@@ -2369,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) });
@@ -2454,6 +2445,9 @@ var Form = ({
   );
 };
 
+// package.json
+var version = "0.2.0";
+
 // src/components/TxConfigForm/index.tsx
 import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
 var TxConfigForm = ({
@@ -2521,7 +2515,7 @@ var openTxConfigForm = async ({
 }) => {
   try {
     return await new Promise((resolve) => {
-      txConfigFormRoot.render(
+      xswapRoot.render(
         /* @__PURE__ */ jsx38(
           TxConfigForm,
           {
@@ -2532,10 +2526,10 @@ var openTxConfigForm = async ({
             supportedChains,
             onSubmit: (route) => {
               resolve(route);
-              txConfigFormRoot.render("");
+              xswapRoot.render("");
             },
             onClose: () => {
-              txConfigFormRoot.render("");
+              xswapRoot.render("");
             }
           }
         )
@@ -2545,12 +2539,17 @@ 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

package/package.json

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

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