feat: add getting started to portals page

src/pages/GatewaysPage/GatewaysPage.tsx

@@ -1,12 +1,16 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { dateFormat } from '@i18n';
 import { numberWithCommasFormatter, tokenFormatter } from '@lib/formatters/formatters';
 import { fromSqd } from '@lib/network';
+import { ExpandMore, Info } from '@mui/icons-material';
 import {
+  Alert,
   Box,
   Button,
+  Collapse,
   Divider,
+  IconButton,
   Stack,
   TableBody,
   TableCell,
@@ -231,19 +235,8 @@ export function MyGateways() {
       loading={isLoading}
       title={
         <>
-          <Stack direction="row" spacing={1.5}>
-            <SquaredChip label="My Portals" color="primary" />
-            {/* <Box pl={0.5} pr={0.5}>
-              <FormGroup>
-                <FormControlLabel
-                  checked={isProMode}
-                  control={<Switch size="small" onChange={() => setProMode(!isProMode)} />}
-                  label={<Typography variant="body2">Pro mode</Typography>}
-                  labelPlacement="end"
-                />
-              </FormGroup>
-            </Box> */}
-          </Stack>
+          <SquaredChip label="My Portals" color="primary" />
+
           <Stack direction="row" spacing={1}>
             <Button color="secondary" variant="outlined">
               LEARN MORE
@@ -295,10 +288,49 @@ export function MyGateways() {
   );
 }
 
+const GettingStartedAlert = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Alert
+      sx={{ mb: 2 }}
+      color="info"
+      icon={<Info />}
+      action={
+        <IconButton color="inherit" sx={{ padding: 0.5 }} onClick={() => setOpen(!open)}>
+          <ExpandMore
+            sx={{
+              transition: 'transform 300ms ease-out',
+              transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+            }}
+          />
+        </IconButton>
+      }
+    >
+      <Typography>Getting started with your portal</Typography>
+
+      <Collapse in={open} unmountOnExit timeout={300}>
+        <Typography color="inherit" variant="body2" pt={1.5}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+          sit amet blandit leo lobortis eget. Mauris quis nulla auctor, maximus justo eu, convallis
+          nisl. Morbi gravida, est et consequat convallis, felis magna consequat lectus, quis
+          convallis nunc nisl in justo. Nullam auctor, nunc eu convallis elementum, erat ex
+          facilisis nunc, quis facilisis nisl nunc nec leo. Nullam scelerisque, sapien nec tincidunt
+          elementum, erat ex facilisis nunc, quis facilisis nisl nunc nec leo. Nullam scelerisque,
+          sapien nec tincidunt elementum, erat ex facilisis nunc, quis facilisis nisl nunc nec leo.
+          Nullam scelerisque, sapien nec tincidunt elementum, erat ex facilisis nunc, quis facilisis
+          nisl nunc nec leo.
+        </Typography>
+      </Collapse>
+    </Alert>
+  );
+};
+
 export function GatewaysPage() {
   return (
     <CenteredPageWrapper className="wide">
       <ConnectedWalletRequired>
+        <GettingStartedAlert />
         <MyStakes />
         <MyGateways />
       </ConnectedWalletRequired>