@getpara/react-common 1.10.0 → 1.11.0

package/dist/components/NetworkSpeedBanner.d.ts

@@ -0,0 +1,5 @@
+export declare const NetworkSpeedBanner: ({ fontSize, iconSize, maxWidth, }: {
+    fontSize?: string;
+    iconSize?: string;
+    maxWidth?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/NetworkSpeedBanner.js

@@ -0,0 +1,80 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import { CpslIcon } from "@getpara/react-components";
+const BannerContainerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: transparent;
+`;
+const BannerContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: ${({ $maxWidth }) => $maxWidth || "100%"};
+  box-sizing: border-box;
+  padding: 6px;
+  border-radius: 12px;
+  background-color: transparent;
+  position: relative;
+  z-index: 10;
+  display: inline-flex;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+const WarningIcon = styled(CpslIcon)`
+  --icon-color: #fbbc04;
+  --width: ${({ $size }) => $size || "24px"};
+  --height: ${({ $size }) => $size || "24px"};
+  margin-right: 6px;
+  flex-shrink: 0;
+`;
+const BannerText = styled.span`
+  font-family: var(--cpsl-default-font);
+  font-weight: 500;
+  font-size: ${({ $fontSize }) => $fontSize || "14px"};
+  color: var(--cpsl-color-black);
+  flex: 1;
+`;
+const NetworkSpeedBanner = ({
+  fontSize,
+  iconSize,
+  maxWidth
+}) => {
+  const [isSlowNetwork, setIsSlowNetwork] = useState(false);
+  useEffect(() => {
+    var _a;
+    const connection = navigator == null ? void 0 : navigator.connection;
+    const checkNetworkSpeed = () => {
+      if (connection) {
+        const isSlow = connection.effectiveType === "2g" || connection.effectiveType === "slow-2g" || connection.downlink && connection.downlink < 0.5;
+        setIsSlowNetwork(isSlow);
+      } else {
+        setIsSlowNetwork(false);
+      }
+    };
+    checkNetworkSpeed();
+    (_a = connection == null ? void 0 : connection.addEventListener) == null ? void 0 : _a.call(connection, "change", checkNetworkSpeed);
+    const intervalId = setInterval(checkNetworkSpeed, 15e3);
+    return () => {
+      var _a2;
+      clearInterval(intervalId);
+      (_a2 = connection == null ? void 0 : connection.removeEventListener) == null ? void 0 : _a2.call(connection, "change", checkNetworkSpeed);
+    };
+  }, []);
+  if (!isSlowNetwork) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(BannerContainerWrapper, { children: /* @__PURE__ */ jsxs(BannerContainer, { $maxWidth: maxWidth, children: [
+    /* @__PURE__ */ jsx(WarningIcon, { $size: iconSize, icon: "alertTriangle" }),
+    /* @__PURE__ */ jsx(BannerText, { $fontSize: fontSize, children: "Your network is slow. This may impact your experience." })
+  ] }) });
+};
+export {
+  NetworkSpeedBanner
+};

package/dist/components/index.d.ts

@@ -6,3 +6,4 @@ export * from './HeroSpinner.js';
 export * from './KnownDevices.js';
 export * from './QRCode.js';
 export * from './UserIdentifier.js';
+export * from './NetworkSpeedBanner.js';

package/dist/components/index.js

@@ -7,3 +7,4 @@ export * from "./HeroSpinner.js";
 export * from "./KnownDevices.js";
 export * from "./QRCode.js";
 export * from "./UserIdentifier.js";
+export * from "./NetworkSpeedBanner.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpara/react-common",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,8 +11,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-components": "1.10.0",
-    "@getpara/web-sdk": "1.10.0",
+    "@getpara/react-components": "1.11.0",
+    "@getpara/web-sdk": "1.11.0",
     "@moonpay/moonpay-react": "^1.8.3",
     "@ramp-network/ramp-instant-sdk": "^4.0.5",
     "@stripe/crypto": "^0.0.4",
@@ -43,5 +43,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "617cf0aa1307a96ec5e91d39e306e8a0b3b86b82"
+  "gitHead": "91b68e4ead22e2104307c934f2a582245b176619"
 }