@xswap-link/sdk 0.6.7 → 0.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -41,19 +41,18 @@
     "date-fns": "^3.6.0",
     "ethers": "5.7.2",
     "notistack": "^3.0.1",
+    "react-error-boundary": "^4.1.0",
     "react-virtuoso": "^4.7.12",
     "viem": "2.x",
     "wagmi": "^2.8.5"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "@changesets/cli": "^2.27.1",
     "@types/async-retry": "^1.4.8",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.17",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "eslint": "^8.57.0",
@@ -64,6 +63,8 @@
     "nodemon": "^3.1.0",
     "postcss-import": "^16.1.0",
     "postcss-minify": "^1.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
     "tsup": "^8.1.0",

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

@@ -30,5 +30,5 @@ export const HistoryView = () => {
     );
   }, [history, historyLoadedOnce]);
 
-  return <div className="h-[50vh] overflow-hidden">{view}</div>;
+  return <div className="h-[40vh] overflow-hidden">{view}</div>;
 };

package/src/components/TxConfigForm/index.tsx

@@ -9,9 +9,10 @@ import {
 import { ModalProvider } from "@src/context/ModalProvider";
 import { Chain, ModalIntegrationPayload, Route } from "@src/models";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { FC, MouseEvent, useEffect, useMemo, useState } from "react";
+import { FC, MouseEvent, useEffect, useMemo } from "react";
 import { useReconnect, WagmiProvider } from "wagmi";
 import { changeHostVariableColor } from "../../../localTheme";
+import { ErrorBoundary } from "react-error-boundary";
 
 export type TxConfigFormPayload = Omit<
   ModalIntegrationPayload,
@@ -74,12 +75,11 @@ export const TxConfigForm = ({
         overlay: false;
       }
   )) => {
-  const [backdropClickDisabled, setBackdropClickDisabled] = useState(false);
   const onBackdropClick = (e: MouseEvent) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
 
-    if (e.target === e.currentTarget && !backdropClickDisabled && overlay) {
+    if (e.target === e.currentTarget && overlay) {
       onClose();
     }
   };
@@ -94,52 +94,58 @@ export const TxConfigForm = ({
   }, [lightTheme, styles]);
 
   return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <WagmiReload />
-        <HistoryProvider>
-          <SwapProvider
-            integrationConfig={{
-              integratorId,
-              dstChainId,
-              dstTokenAddr,
-              srcChainId,
-              srcTokenAddr,
-              customContractCalls,
-              desc,
-              dstDisplayTokenAddr,
-              defaultWalletPicker,
-            }}
-            supportedChains={supportedChains}
-            wagmiConfig={wagmiConfig}
-            overlay={overlay}
-          >
-            <TransactionProvider>
-              <TxUIWrapper>
-                <ModalProvider>
-                  {overlay ? (
-                    <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"
-                      onMouseDown={onBackdropClick}
-                    >
-                      <div className="relative bg-t_bg_primary rounded-3xl overflow-auto text-t_text_primary border-2 border-solid border-[rgba(255,255,255,0.1)] min-w-x_modal max-w-x_modal min-h-[432px] w-full">
-                        <Swap onSubmit={onSubmit} onClose={onClose} />
+    <ErrorBoundary
+      FallbackComponent={() => (
+        <div>Something went wrong, please contact XSwap.</div>
+      )}
+    >
+      <WagmiProvider config={wagmiConfig}>
+        <QueryClientProvider client={queryClient}>
+          <WagmiReload />
+          <HistoryProvider>
+            <SwapProvider
+              integrationConfig={{
+                integratorId,
+                dstChainId,
+                dstTokenAddr,
+                srcChainId,
+                srcTokenAddr,
+                customContractCalls,
+                desc,
+                dstDisplayTokenAddr,
+                defaultWalletPicker,
+              }}
+              supportedChains={supportedChains}
+              wagmiConfig={wagmiConfig}
+              overlay={overlay}
+            >
+              <TransactionProvider>
+                <TxUIWrapper>
+                  <ModalProvider>
+                    {overlay ? (
+                      <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"
+                        onMouseDown={onBackdropClick}
+                      >
+                        <div className="relative bg-t_bg_primary rounded-3xl overflow-auto text-t_text_primary border-2 border-solid border-[rgba(255,255,255,0.1)] min-w-x_modal max-w-x_modal min-h-[432px] w-full">
+                          <Swap onSubmit={onSubmit} onClose={onClose} />
+                          <PoweredBy />
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="bg-t_bg_primary rounded-3xl overflow-auto text-t_text_primary border-2 border-solid border-[rgba(255,255,255,0.1)] min-h-[432px] w-full">
+                        <Swap onSubmit={() => {}} onClose={() => {}} />
                         <PoweredBy />
                       </div>
-                    </div>
-                  ) : (
-                    <div className="bg-t_bg_primary rounded-3xl overflow-auto text-t_text_primary border-2 border-solid border-[rgba(255,255,255,0.1)] min-h-[432px] w-full">
-                      <Swap onSubmit={() => {}} onClose={() => {}} />
-                      <PoweredBy />
-                    </div>
-                  )}
-                </ModalProvider>
-              </TxUIWrapper>
-            </TransactionProvider>
-          </SwapProvider>
-        </HistoryProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+                    )}
+                  </ModalProvider>
+                </TxUIWrapper>
+              </TransactionProvider>
+            </SwapProvider>
+          </HistoryProvider>
+        </QueryClientProvider>
+      </WagmiProvider>
+    </ErrorBoundary>
   );
 };
 
@@ -159,14 +165,14 @@ export const openTxConfigForm = async ({
 }: TxConfigFormPayload): Promise<Route> => {
   try {
     if (xpayRoot === null) {
-      throw new Error("XPay was incorrectly initialised");
+      throw new Error("XPay was incorrectly initialized");
     }
 
     await waitForInitialization();
 
     return await new Promise(() => {
       if (xpayRoot === null) {
-        throw new Error("XPay was incorrectly initialised");
+        throw new Error("XPay was incorrectly initialized");
       }
 
       xpayRoot.render(

package/src/components/TxStatusButton/index.tsx

@@ -117,7 +117,7 @@ export const renderTxStatusButtons = () => {
   ));
 
   if (xpayTxStatusRoot === null) {
-    throw new Error("XPay was incorrectly initialised");
+    throw new Error("XPay was incorrectly initialized");
   }
 
   xpayTxStatusRoot.render(

package/src/components/global.css

@@ -4,6 +4,8 @@
 
 :host {
   color: white;
+  line-height: 1.5rem;
+  font-size: 1rem;
 
   /* Works on Firefox */
   * {