Create admin page with ability to control featured communities

src/app.jsx

@@ -162,6 +162,14 @@ function Page() {
         />
       );
     }
+    case "admin": {
+      return (
+        <Widget
+          src={"${REPL_DEVHUB}/widget/devhub.page.admin"}
+          props={passProps}
+        />
+      );
+    }
 
     default: {
       // TODO: 404 page

src/core/adapter/devhub-contract.jsx

@@ -25,6 +25,9 @@ function getFeaturedCommunities() {
   );
 }
 
+const setFeaturedCommunities = ({ handles }) =>
+  Near.call(devHubAccountId, "set_featured_communities", { handles });
+
 function getAccountCommunityPermissions({ account_id, community_handle }) {
   return (
     Near.view("${REPL_DEVHUB_CONTRACT}", "get_account_community_permissions", {
@@ -205,7 +208,7 @@ function useQuery(name, params) {
         })),
 
     JSON.stringify({ name, params }),
-    { subscribe: false } // NOTE: I'm turning off subscribe to stop the constant re-rendering
+    { subscribe: true }
   );
 
   return cacheState === null ? initialState : cacheState;
@@ -217,6 +220,7 @@ return {
   createCommunity,
   getCommunity,
   getFeaturedCommunities,
+  setFeaturedCommunities,
   getAccountCommunityPermissions,
   updateCommunity,
   deleteCommunity,

src/devhub/components/atom/Spinner.jsx

@@ -0,0 +1,27 @@
+const Spinner = ({ classNames, isHidden }) => (
+  <div
+    className={[
+      "d-flex justify-content-center align-items-center gap-4 w-100 h-100",
+      classNames?.root ?? "",
+      isHidden ? "d-none" : "",
+    ].join(" ")}
+  >
+    <div className="spinner-grow text-info" role="status" />
+
+    <div
+      className="spinner-grow text-info"
+      role="status"
+      style={{ animationDelay: "0.3s" }}
+    >
+      <span className="visually-hidden">Loading...</span>
+    </div>
+
+    <div
+      className="spinner-grow text-info"
+      role="status"
+      style={{ animationDelay: "0.6s" }}
+    />
+  </div>
+);
+
+return Spinner(props);

src/devhub/entity/community/Card.jsx

@@ -8,6 +8,7 @@ const CommunityCard = ({
   format,
   isBannerEnabled,
   metadata,
+  actions,
   ...otherProps
 }) => {
   const renderFormat =
@@ -46,9 +47,8 @@ const CommunityCard = ({
   `;
 
   const formatSmall = (
-    <Link
+    <div
       {...otherProps}
-      to={link}
       className={[
         "d-flex p-0 p-lg-3",
         "rounded-2 border border-2",
@@ -60,13 +60,14 @@ const CommunityCard = ({
           : "#ffffff",
       }}
     >
-      <div
-        className="d-flex align-items-center gap-3 rounded-4 w-100 h-100"
+      <Link
+        className="d-flex align-items-center gap-3 rounded-4 w-100 h-100 text-dark text-decoration-none"
         style={{
           background: "rgba(255, 255, 255, 0.9)",
           backdropFilter: "blur(4px)",
           padding: "3rem 1rem",
         }}
+        to={link}
       >
         <Logo
           alt="Community logo"
@@ -87,8 +88,9 @@ const CommunityCard = ({
             {metadata.description}
           </CommunityDescription>
         </div>
-      </div>
-    </Link>
+      </Link>
+      {actions}
+    </div>
   );
 
   const formatMedium = (

src/devhub/page/admin.jsx

@@ -0,0 +1,105 @@
+const { useQuery, hasModerator, setFeaturedCommunities } = VM.require(
+  "${REPL_DEVHUB}/widget/core.adapter.devhub-contract"
+);
+
+const { href } = VM.require("${REPL_DEVHUB}/widget/core.lib.url");
+
+if (!useQuery || !hasModerator || !href) {
+  return <p>Loading modules...</p>;
+}
+
+const AdministrationSettings = {
+  communities: {
+    maxFeatured: 5,
+  },
+};
+
+const CommunityFeaturingSchema = {
+  handle: {
+    label: "Pinned handle",
+    inputProps: { min: 3, max: 40, required: true },
+  },
+};
+
+const featuredCommunities = useQuery("featured_communities");
+const featuredCommunityList = featuredCommunities.data ?? [];
+const isDevHubModerator = hasModerator({
+  account_id: context.accountId,
+});
+
+const noPermissionBanner = (
+  <div
+    className="d-flex flex-column justify-content-center align-items-center"
+    style={{ height: 384 }}
+  >
+    <h2 className="alert alert-danger">
+      Your account does not have administration permissions.
+    </h2>
+  </div>
+);
+
+if (!isDevHubModerator) {
+  return noPermissionBanner;
+}
+
+const featuredCommunityHandles = featuredCommunityList.map(
+  ({ handle }) => handle
+);
+
+const replaceFeaturedCommunity =
+  ({ handle: targetHandle }) =>
+  ({ handle: replacementHandle }) =>
+    setFeaturedCommunities({
+      handles: featuredCommunityHandles.map((handle) =>
+        handle === targetHandle ? replacementHandle : handle
+      ),
+    });
+
+return (
+  <div className="d-flex flex-column gap-4 p-4">
+    <Widget
+      src={"${REPL_DEVHUB}/widget/devhub.components.atom.Spinner"}
+      props={{
+        isHidden: !featuredCommunities.isLoading,
+      }}
+    />
+
+    {!featuredCommunities.isLoading && (
+      <>
+        <h3>Featured communities</h3>
+
+        <div className="d-flex flex-wrap align-content-start gap-4">
+          {featuredCommunityList.map((community) => (
+            <Widget
+              src={"${REPL_DEVHUB}/widget/devhub.entity.community.Card"}
+              props={{
+                actions: (
+                  <div className="d-flex justify-content-center align-items-center">
+                    <Widget
+                      src={
+                        "${REPL_DEVHUB}/widget/devhub.components.organism.Configurator"
+                      }
+                      props={{
+                        externalState: community,
+                        isActive: true,
+                        isUnlocked: true,
+                        cancelLabel: "Reset",
+                        onSubmit: replaceFeaturedCommunity(community),
+                        submitLabel: "Replace",
+                        schema: CommunityFeaturingSchema,
+                      }}
+                    />
+                  </div>
+                ),
+
+                format: "small",
+                metadata: community,
+                target: "_blank",
+              }}
+            />
+          ))}
+        </div>
+      </>
+    )}
+  </div>
+);