Add warning banner on Transactions page (#308)

base-org · Feb 8, 2024 · e10142e · e10142e
1 parent 2ecfc08
commit e10142e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/apps/bridge/pages/transactions.tsx b/apps/bridge/pages/transactions.tsx
@@ -1,5 +1,6 @@
 import { memo, useMemo, useState } from 'react';
 import { AccountContainer } from 'apps/bridge/src/components/AccountContainer/AccountContainer';
+import { WarningBanner } from 'apps/bridge/src/components/WarningBanner/WarningBanner';
 import { FaqSidebar } from 'apps/bridge/src/components/Faq/FaqSidebar';
 import { Table } from 'apps/bridge/src/components/system/layout/Table/Table';
 import { DepositRow } from 'apps/bridge/src/components/Transactions/DepositRow/DepositRow';
@@ -162,6 +163,7 @@ export default memo(function Transactions() {
       <Head>
         <title>Base</title>
       </Head>
+      <WarningBanner content="Transactions may take a few minutes to appear" />
       <AccountContainer>
         <>
           <div className="grow">{content}</div>

diff --git a/apps/bridge/src/components/WarningBanner/WarningBanner.tsx b/apps/bridge/src/components/WarningBanner/WarningBanner.tsx
@@ -0,0 +1,16 @@
+import Image from 'next/image';
+
+type BannerContainerProps = {
+  content: string;
+};
+
+export function WarningBanner({ content }: BannerContainerProps) {
+  return (
+    <div className="flex-col border-t border-sidebar-border bg-[#0A0B0D] px-0 font-sans text-white ">
+      <div className="flex items-center bg-warning-banner-red p-3">
+        <Image alt="tooltip" src="/icons/alert.svg" width={16} height={16} />
+        <span className="ml-2">{content}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/bridge/tailwind.config.js b/apps/bridge/tailwind.config.js
@@ -20,6 +20,7 @@ module.exports = {
         'cds-background-green-60': 'rgba(39, 173, 117, 1)',
         'cds-background-red-60': 'rgba(240, 97, 109, 1)',
         'cds-background-wash': 'rgba(0, 16, 51, 1)',
+        'warning-banner-red': 'rgba(47, 5, 5, 1)',
         gray: '#1E2025',
         modal: '#464B55',
       },