Feat(layout): add migration banner to layout for Initia

src/lib/layout/index.tsx

@@ -1,9 +1,11 @@
-import { Grid, GridItem } from "@chakra-ui/react";
+import { Box, Button, Flex, Grid, GridItem, Text } from "@chakra-ui/react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import type { ReactNode } from "react";
 import { useEffect, useMemo } from "react";
 
-import { useMobile, useNavContext } from "lib/app-provider";
+import { useInitia, useMobile, useNavContext } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
 import { scrollToTop } from "lib/utils";
 
 import Footer from "./Footer";
@@ -20,6 +22,7 @@ const Layout = ({ children }: LayoutProps) => {
   const router = useRouter();
   const isMobile = useMobile();
   const { isExpand, setIsExpand } = useNavContext();
+  const isInitia = useInitia();
 
   const defaultRow = "64px 48px 1fr";
   const mode = useMemo(() => {
@@ -48,46 +51,83 @@ const Layout = ({ children }: LayoutProps) => {
   }, [router.asPath, router.query.tab]);
 
   return (
-    <Grid
-      templateAreas={mode.templateAreas}
-      gridTemplateRows={mode.templateRows}
-      gridTemplateColumns={mode.templateCols}
-      h="100vh"
-      overflowX="hidden"
-      overflowY="auto"
-      bg="background.main"
-    >
-      <GridItem borderBottom="1px solid" borderColor="gray.700" area="header">
-        {mode.header}
-      </GridItem>
-      {!isMobile && (
-        <>
-          <GridItem
-            borderBottom="1px solid"
-            borderColor="gray.700"
-            area="subheader"
-            py={{ base: 2, md: 0 }}
-            px={{ base: 4, md: 0 }}
-          >
-            {mode.subHeader}
-          </GridItem>
-          <GridItem
-            borderRight="1px solid"
-            borderColor="gray.700"
-            area="nav"
-            overflowY="auto"
-          >
-            <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />
-          </GridItem>
-        </>
+    <Box>
+      {isInitia && (
+        <Flex
+          py={{
+            base: 3,
+            md: 2,
+          }}
+          px={3}
+          bg="primary.darker"
+          justifyContent="center"
+          flexDirection={{ base: "column", md: "row" }}
+          gap={{
+            base: 2,
+            md: 6,
+          }}
+          alignItems={{
+            base: "flex-end",
+            md: "center",
+          }}
+        >
+          <Text variant="body1">
+            Initia Wallet extension is being deprecated. Existing extension
+            users must migrate to be eligible for future incentives.
+          </Text>
+          <Link href="#" target="_blank" rel="noopener noreferrer">
+            <Button
+              size="sm"
+              rightIcon={<CustomIcon name="launch" boxSize={2.5} />}
+            >
+              Migrate Wallet
+            </Button>
+          </Link>
+        </Flex>
       )}
-      <GridItem area="main" overflowX="hidden" id="content">
-        <div style={{ minHeight: "calc(100vh - 129px)", position: "relative" }}>
-          {children}
-        </div>
-        <Footer />
-      </GridItem>
-    </Grid>
+      <Grid
+        templateAreas={mode.templateAreas}
+        gridTemplateRows={mode.templateRows}
+        gridTemplateColumns={mode.templateCols}
+        h="100vh"
+        overflowX="hidden"
+        overflowY="auto"
+        bg="background.main"
+      >
+        <GridItem borderBottom="1px solid" borderColor="gray.700" area="header">
+          {mode.header}
+        </GridItem>
+        {!isMobile && (
+          <>
+            <GridItem
+              borderBottom="1px solid"
+              borderColor="gray.700"
+              area="subheader"
+              py={{ base: 2, md: 0 }}
+              px={{ base: 4, md: 0 }}
+            >
+              {mode.subHeader}
+            </GridItem>
+            <GridItem
+              borderRight="1px solid"
+              borderColor="gray.700"
+              area="nav"
+              overflowY="auto"
+            >
+              <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />
+            </GridItem>
+          </>
+        )}
+        <GridItem area="main" overflowX="hidden" id="content">
+          <div
+            style={{ minHeight: "calc(100vh - 129px)", position: "relative" }}
+          >
+            {children}
+          </div>
+          <Footer />
+        </GridItem>
+      </Grid>
+    </Box>
   );
 };