feat: added network notice banner as a resuable component (#112)

* feat: added network notice banner as a resuable component

* refactor: replaced react-icons with svgs

* chore: export types

packages/react-components/src/lib/components/NoticeBanner.tsx

@@ -0,0 +1,41 @@
+import X from '../icons/X';
+import Megaphone from '../icons/Megaphone';
+import { useState } from 'react';
+import { NetworkNotice, activeNotices } from '../utils/networkConfig';
+
+export type NoticeBannerProps = {
+  notices: Array<NetworkNotice>;
+};
+
+export const NoticeBanner = ({ notices }: NoticeBannerProps) => {
+  const [isDismissed, setIsDismissed] = useState(false);
+  const bannerContent = activeNotices(notices).join(' • ');
+  const isVisible =
+    !isDismissed && bannerContent && bannerContent.trim().length;
+
+  return (
+    isVisible && (
+      <div className="bg-yellow-400 overflow-hidden">
+        <div className="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
+          <div className="flex flex-wrap items-center justify-between">
+            <div className="flex w-0 flex-1 items-center">
+              <span className="flex rounded-lgp-2">
+                <Megaphone className="h-6 w-6" aria-hidden="true" />
+              </span>
+              <p className="ml-3 font-medium text-black">{bannerContent}</p>
+            </div>
+            <div className="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
+              <button
+                onClick={() => setIsDismissed(true)}
+                type="button"
+                className="-mr-1 flex rounded-md p-2 hover:bg-black hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2"
+              >
+                <X className="h-6 w-6" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  );
+};

packages/react-components/src/lib/components/index.ts

@@ -3,3 +3,4 @@ export * from './NodeSelectorModal';
 export * from './AmountInput';
 export * from './NetworkDropdown';
 export * from './OnboardIstModal';
+export * from './NoticeBanner';

packages/react-components/src/lib/icons/Megaphone.tsx

@@ -0,0 +1,20 @@
+const Megaphone = (props: { [key: string]: any }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46"
+      />
+    </svg>
+  );
+};
+
+export default Megaphone;

packages/react-components/src/lib/icons/X.tsx

@@ -0,0 +1,20 @@
+const X = (props: { [key: string]: any }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M6 18 18 6M6 6l12 12"
+      />
+    </svg>
+  );
+};
+
+export default X;

packages/react-components/src/lib/utils/index.ts

@@ -1 +1,2 @@
 export * from './leapElementsClient';
+export * from './networkConfig';

packages/react-components/src/lib/utils/networkConfig.ts

@@ -0,0 +1,22 @@
+export type NetworkNotice = {
+  start: string;
+  // In the future this might be optional to indicate that it's user-dismissable.
+  // In that case the client would need some persistent state, perhaps keyed by `message`.
+  end: string;
+  message: string;
+};
+
+export const activeNotices = (notices: Array<NetworkNotice>) => {
+  if (!notices) return [];
+
+  const now = Date.now();
+  const active = notices.filter(n => {
+    const startD = Date.parse(n.start);
+    if (startD > now) {
+      return false;
+    }
+    const endD = Date.parse(n.end);
+    return startD < endD;
+  });
+  return active.map(n => n.message);
+};