Add OP community (#1604)

packages/admin-ui/src/pages/rollups/components/OpCommunity.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { Accordion, Card } from "react-bootstrap";
+import { IoIosArrowDropdown, IoIosArrowDropup } from "react-icons/io";
+import { BsDiscord } from "react-icons/bs";
+import { MdForum, MdHowToVote } from "react-icons/md";
+import "./opCommunity.css";
+
+export default function OpCommunity() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const iconStyle = {
+    fontSize: "2rem",
+    marginRight: "1rem"
+  };
+
+  return (
+    <div>
+      <Accordion defaultActiveKey={isOpen ? "0" : ""}>
+        <Card>
+          <Accordion.Toggle
+            as={Card.Header}
+            eventKey="0"
+            onClick={() => setIsOpen(!isOpen)}
+            style={{ cursor: "pointer" }}
+          >
+            {isOpen ? <IoIosArrowDropup /> : <IoIosArrowDropdown />}{" "}
+            <b>Optimism Community</b>
+          </Accordion.Toggle>
+          <Accordion.Collapse eventKey="0">
+            <Card.Body>
+              <div style={{ marginBottom: "1rem" }}>
+                Dive into the next-gen blockchain scalability solution. Optimism
+                revolutionizes transaction speeds, ensuring a seamless and
+                efficient decentralized experience. Be part of the movement
+                that's shaping the future of blockchain.
+              </div>
+
+              <div>
+                <a href="https://discord.gg/optimism" className="iconLink">
+                  <BsDiscord style={iconStyle} />
+                </a>
+                <b>Discord</b>: Connect with fellow enthusiasts, share insights,
+                seek assistance, or simply engage in lively blockchain
+                discussions.
+              </div>
+              <div>
+                <a href="https://gov.optimism.io/" className="iconLink">
+                  <MdForum style={iconStyle} />
+                </a>
+                <b>Governance Forum</b>: Delve into deep-dive discussions, share
+                your perspectives, or keep abreast with the latest updates.
+              </div>
+              <div>
+                <a
+                  href="https://snapshot.org/#/opcollective.eth"
+                  className="iconLink"
+                >
+                  <MdHowToVote style={iconStyle} />
+                </a>
+                <b>Snapshot Governance Voting</b>: Have a say in the future of
+                Optimism. Voice your opinion and cast your vote on key
+                proposals.
+              </div>
+            </Card.Body>
+          </Accordion.Collapse>
+        </Card>
+      </Accordion>
+    </div>
+  );
+}

packages/admin-ui/src/pages/rollups/components/Optimism.tsx

@@ -17,6 +17,7 @@ import Input from "components/Input";
 import { confirm } from "components/ConfirmDialog";
 import { disclaimer } from "../data";
 import { withToast } from "components/toast/Toast";
+import OpCommunity from "./OpCommunity";
 
 export default function Optimism({ description }: { description: string }) {
   const { theme } = React.useContext(ThemeContext);
@@ -109,6 +110,7 @@ export default function Optimism({ description }: { description: string }) {
 
   return (
     <div className={theme === "light" ? "optimism-light" : "optimism-dark"}>
+      <OpCommunity />
       {currentOptimismConfigReq.data ? (
         <Card>
           <p>

packages/admin-ui/src/pages/rollups/components/opCommunity.css

@@ -0,0 +1,13 @@
+.iconLink {
+  color: inherit; /* inherit color to make sure it looks like regular text */
+  text-decoration: none; /* to remove the underline */
+}
+
+.iconLink:hover {
+  color: var(--dappnode-links-color); /* change the color on hover */
+}
+
+.iconLink svg {
+  /* targeting the svg which is the icon */
+  vertical-align: middle; /* to align the icon with the text */
+}