From 4027edc0f83b66889aba3b6530cf3cd7260a2922 Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <meghadev1901@gmail.com>
Date: Wed, 14 Feb 2024 20:44:17 +0530
Subject: [PATCH] fix proposals navigation

---
 .../widget/DAO/Proposals/index.jsx            | 193 +++++----
 apps/astraplusplus/widget/DAO/index.jsx       | 382 +++++++++---------
 2 files changed, 284 insertions(+), 291 deletions(-)

diff --git a/apps/astraplusplus/widget/DAO/Proposals/index.jsx b/apps/astraplusplus/widget/DAO/Proposals/index.jsx
index faab00d..e8033aa 100644
--- a/apps/astraplusplus/widget/DAO/Proposals/index.jsx
+++ b/apps/astraplusplus/widget/DAO/Proposals/index.jsx
@@ -3,122 +3,119 @@ const proposalId = props.proposalId;
 const accountId = context.accountId ?? "";
 
 const CoADaoId = props.dev
-    ? "/*__@replace:CoADaoIdTesting__*/"
-    : "/*__@replace:CoADaoId__*/";
+  ? "/*__@replace:CoADaoIdTesting__*/"
+  : "/*__@replace:CoADaoId__*/";
 const VotingBodyDaoId = props.dev
-    ? "/*__@replace:VotingBodyDaoIdTesting__*/"
-    : "/*__@replace:VotingBodyDaoId__*/";
+  ? "/*__@replace:VotingBodyDaoIdTesting__*/"
+  : "/*__@replace:VotingBodyDaoId__*/";
 const TCDaoId = props.dev
-    ? "/*__@replace:TCDaoIdTesting__*/"
-    : "/*__@replace:TCDaoId__*/";
+  ? "/*__@replace:TCDaoIdTesting__*/"
+  : "/*__@replace:TCDaoId__*/";
 const HoMDaoId = props.dev
-    ? "/*__@replace:HoMDaoIdTesting__*/"
-    : "/*__@replace:HoMDaoId__*/";
+  ? "/*__@replace:HoMDaoIdTesting__*/"
+  : "/*__@replace:HoMDaoId__*/";
 
 const isCongressDaoID =
-    daoId === HoMDaoId || daoId === CoADaoId || daoId === TCDaoId;
+  daoId === HoMDaoId || daoId === CoADaoId || daoId === TCDaoId;
 
 State.init({
-    isProposalModalOpen: false,
-    hideProposalBtn: false
+  isProposalModalOpen: false,
+  hideProposalBtn: false
 });
 
 if (proposalId) {
-    return (
-        <div>
-            <Widget
-                src="/*__@appAccount__*//widget/DAO.Proposals.Card.index"
-                props={props}
-            />
-        </div>
-    );
+  return (
+    <div>
+      <Widget
+        src="/*__@appAccount__*//widget/DAO.Proposals.Card.index"
+        props={props}
+      />
+    </div>
+  );
 }
 
 if (isCongressDaoID) {
-    const policy = Near.view(daoId, "get_members");
-    const isMember = policy?.members?.includes(accountId);
-    State.update({ hideProposalBtn: !isMember });
+  const policy = Near.view(daoId, "get_members");
+  const isMember = policy?.members?.includes(accountId);
+  State.update({ hideProposalBtn: !isMember });
 }
 
 if (daoId === VotingBodyDaoId) {
-    const resp = useCache(
-        () =>
-            asyncFetch(
-                `https://api.pikespeak.ai/sbt/sbt-by-owner?holder=${accountId}&registry=registry.i-am-human.near`,
-                {
-                    method: "GET",
-                    headers: {
-                        "Content-Type": "application/json",
-                        "x-api-key": "/*__@replace:pikespeakApiKey__*/"
-                    }
-                }
-            ).then((res) => res.body),
-        daoId + "-is-human-info",
-        { subscribe: false }
-    );
-    State.update({
-        hideProposalBtn: !resp?.length > 0
-    });
+  const resp = useCache(
+    () =>
+      asyncFetch(
+        `https://api.pikespeak.ai/sbt/sbt-by-owner?holder=${accountId}&registry=registry.i-am-human.near`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": "/*__@replace:pikespeakApiKey__*/"
+          }
+        }
+      ).then((res) => res.body),
+    daoId + "-is-human-info",
+    { subscribe: false }
+  );
+  State.update({
+    hideProposalBtn: !resp?.length > 0
+  });
 }
 
 return (
-    <>
-        <div style={{ width: "98%" }}>
-            <div className="d-flex justify-content-between flex-wrap mb-3 align-items-center gap-3 pb-3">
-                <h2 className="my-auto">Proposals</h2>
-                {!state.hideProposalBtn && (
-                    <Widget
-                        src="/*__@appAccount__*//widget/Common.Layout.CardModal"
-                        props={{
-                            title: "Create Proposal",
-                            onToggle: () =>
-                                State.update({
-                                    isProposalModalOpen:
-                                        !state.isProposalModalOpen
-                                }),
-                            isOpen: state.isProposalModalOpen,
-                            toggle: (
-                                <Widget
-                                    src="nearui.near/widget/Input.Button"
-                                    props={{
-                                        children: (
-                                            <>
-                                                Create Proposal
-                                                <i className="bi bi-16 bi-plus-lg"></i>
-                                            </>
-                                        ),
-                                        variant: "info"
-                                    }}
-                                />
-                            ),
-                            content: (
-                                <div
-                                    className="d-flex flex-column align-items-stretch"
-                                    style={{
-                                        width: "800px",
-                                        maxWidth: "100vw"
-                                    }}
-                                >
-                                    <Widget
-                                        src={
-                                            "/*__@appAccount__*//widget/DAO.Proposal.Create"
-                                        }
-                                        props={{
-                                            daoId: daoId,
-                                            dev: props.dev
-                                        }}
-                                    />
-                                </div>
-                            )
-                        }}
-                    />
-                )}
-            </div>
+  <>
+    <div style={{ width: "98%" }}>
+      <div className="d-flex justify-content-between flex-wrap mb-3 align-items-center gap-3 pb-3">
+        <h2 className="my-auto">Proposals</h2>
+        {!state.hideProposalBtn && (
+          <Widget
+            src="/*__@appAccount__*//widget/Common.Layout.CardModal"
+            props={{
+              title: "Create Proposal",
+              onToggle: () =>
+                State.update({
+                  isProposalModalOpen: !state.isProposalModalOpen
+                }),
+              isOpen: state.isProposalModalOpen,
+              toggle: (
+                <Widget
+                  src="nearui.near/widget/Input.Button"
+                  props={{
+                    children: (
+                      <>
+                        Create Proposal
+                        <i className="bi bi-16 bi-plus-lg"></i>
+                      </>
+                    ),
+                    variant: "info"
+                  }}
+                />
+              ),
+              content: (
+                <div
+                  className="d-flex flex-column align-items-stretch"
+                  style={{
+                    width: "800px",
+                    maxWidth: "100vw"
+                  }}
+                >
+                  <Widget
+                    src={"/*__@appAccount__*//widget/DAO.Proposal.Create"}
+                    props={{
+                      daoId: daoId,
+                      dev: props.dev
+                    }}
+                  />
+                </div>
+              )
+            }}
+          />
+        )}
+      </div>
 
-            <Widget
-                src="/*__@appAccount__*//widget/DAO.Proposals.ProposalsPikespeak"
-                props={{ daoId: daoId, dev: props.dev }}
-            />
-        </div>
-    </>
+      <Widget
+        src="/*__@appAccount__*//widget/DAO.Proposals.ProposalsPikespeak"
+        props={{ daoId: daoId, dev: props.dev }}
+      />
+    </div>
+  </>
 );
diff --git a/apps/astraplusplus/widget/DAO/index.jsx b/apps/astraplusplus/widget/DAO/index.jsx
index ac2b198..5e9a487 100644
--- a/apps/astraplusplus/widget/DAO/index.jsx
+++ b/apps/astraplusplus/widget/DAO/index.jsx
@@ -1,232 +1,228 @@
 const CoADaoId = props.dev
-    ? "/*__@replace:CoADaoIdTesting__*/"
-    : "/*__@replace:CoADaoId__*/";
+  ? "/*__@replace:CoADaoIdTesting__*/"
+  : "/*__@replace:CoADaoId__*/";
 const VotingBodyDaoId = props.dev
-    ? "/*__@replace:VotingBodyDaoIdTesting__*/"
-    : "/*__@replace:VotingBodyDaoId__*/";
+  ? "/*__@replace:VotingBodyDaoIdTesting__*/"
+  : "/*__@replace:VotingBodyDaoId__*/";
 const TCDaoId = props.dev
-    ? "/*__@replace:TCDaoIdTesting__*/"
-    : "/*__@replace:TCDaoId__*/";
+  ? "/*__@replace:TCDaoIdTesting__*/"
+  : "/*__@replace:TCDaoId__*/";
 const HoMDaoId = props.dev
-    ? "/*__@replace:HoMDaoIdTesting__*/"
-    : "/*__@replace:HoMDaoId__*/";
+  ? "/*__@replace:HoMDaoIdTesting__*/"
+  : "/*__@replace:HoMDaoId__*/";
 const widgetOwner = props.widgetOwner ?? "/*__@appAccount__*/";
 
 State.init({
-    tab: props.tab ?? "proposals",
-    accountId: props.accountId ?? context.accountId,
-    daoId: props.daoId,
-    proposalId: props.proposalId
+  tab: props.tab ?? "proposals",
+  accountId: props.accountId ?? context.accountId
 });
 
 const update = (state) => State.update(state);
 
 const constructURL = (paramObj, base) => {
-    paramObj = { ...paramObj, page: "dao" };
-    const baseURL = base ?? `#/${widgetOwner}/widget/home`;
-    let params = "";
-    for (const [key, value] of Object.entries(paramObj)) {
-        if (key === "dev" && value === false) {
-            continue;
-        }
-        params += `${key}=${value}&`;
+  paramObj = { ...paramObj, page: "dao" };
+  const baseURL = base ?? `#/${widgetOwner}/widget/home`;
+  let params = "";
+  for (const [key, value] of Object.entries(paramObj)) {
+    if (key === "dev" && value === false) {
+      continue;
     }
-    params = params.slice(0, -1);
-    return `${baseURL}?${params}`;
+    params += `${key}=${value}&`;
+  }
+  params = params.slice(0, -1);
+  return `${baseURL}?${params}`;
 };
 
 const isCongressDaoID =
-    props.daoId === HoMDaoId ||
-    props.daoId === CoADaoId ||
-    props.daoId === TCDaoId;
+  props.daoId === HoMDaoId ||
+  props.daoId === CoADaoId ||
+  props.daoId === TCDaoId;
 
 const tabs = {
-    proposals: {
-        name: "Proposals",
-        widget: "DAO.Proposals.index",
-        href: constructURL({
-            tab: "proposals",
-            daoId: state.daoId,
-            dev: props.dev ?? false
-        })
-    },
-    home: {
-        name: "Discussion",
-        widget: "DAO.Discussion",
-        href: constructURL({
-            tab: "home",
-            daoId: state.daoId,
-            dev: props.dev ?? false
-        })
-    },
-    funds: {
-        name: "Fund Flows",
-        widget: "DAO.Funds.index",
-        href: constructURL({
-            tab: "funds",
-            daoId: state.daoId,
-            dev: props.dev ?? false
-        })
-    },
-    members: {
-        name: "Members & Policy",
-        widget: "DAO.Members.index",
-        href: constructURL({
-            tab: "members",
-            daoId: state.daoId,
-            dev: props.dev ?? false
-        })
-    },
-    followers: {
-        name: "Followers",
-        widget: "DAO.Followers.index",
-        href: constructURL({
-            tab: "followers",
-            daoId: state.daoId,
-            dev: props.dev ?? false
-        })
-    },
-    bounties: {
-        name: "Bounties",
-        widget: "DAO.Bounties",
-        href: constructURL({
-            tab: "bounties",
-            daoId: state.daoId,
-            dev: props.dev ?? false
-        })
-    },
-    settings: {
-        name: "Settings",
-        widget: "DAO.Settings.index",
-        href: constructURL({
-            tab: "settings",
-            daoId: state.daoId,
-            dev: props.dev ?? false
-        })
-    }
+  proposals: {
+    name: "Proposals",
+    widget: "DAO.Proposals.index",
+    href: constructURL({
+      tab: "proposals",
+      daoId: props.daoId,
+      dev: props.dev ?? false
+    })
+  },
+  home: {
+    name: "Discussion",
+    widget: "DAO.Discussion",
+    href: constructURL({
+      tab: "home",
+      daoId: props.daoId,
+      dev: props.dev ?? false
+    })
+  },
+  funds: {
+    name: "Fund Flows",
+    widget: "DAO.Funds.index",
+    href: constructURL({
+      tab: "funds",
+      daoId: props.daoId,
+      dev: props.dev ?? false
+    })
+  },
+  members: {
+    name: "Members & Policy",
+    widget: "DAO.Members.index",
+    href: constructURL({
+      tab: "members",
+      daoId: props.daoId,
+      dev: props.dev ?? false
+    })
+  },
+  followers: {
+    name: "Followers",
+    widget: "DAO.Followers.index",
+    href: constructURL({
+      tab: "followers",
+      daoId: props.daoId,
+      dev: props.dev ?? false
+    })
+  },
+  bounties: {
+    name: "Bounties",
+    widget: "DAO.Bounties",
+    href: constructURL({
+      tab: "bounties",
+      daoId: props.daoId,
+      dev: props.dev ?? false
+    })
+  },
+  settings: {
+    name: "Settings",
+    widget: "DAO.Settings.index",
+    href: constructURL({
+      tab: "settings",
+      daoId: props.daoId,
+      dev: props.dev ?? false
+    })
+  }
 };
 
 if (isCongressDaoID || props.daoId === VotingBodyDaoId) {
-    delete tabs["funds"];
-    delete tabs["bounties"];
-    delete tabs["settings"];
+  delete tabs["funds"];
+  delete tabs["bounties"];
+  delete tabs["settings"];
 }
 // not showing members page in v1
 if (props.daoId === VotingBodyDaoId) {
-    delete tabs["members"];
+  delete tabs["members"];
 }
 
 if (!props.daoId) {
-    // TODO: add a proper error screen
-    return "Please provide a DAO ID";
+  // TODO: add a proper error screen
+  return "Please provide a DAO ID";
 }
 
 const tabContent = (
-    <Widget
-        src={`${widgetOwner}/widget/${tabs[state.tab || "home"].widget}`}
-        props={{
-            update,
-            tab: state.tab,
-            accountId: state.accountId,
-            daoId: state.daoId,
-            proposalId: state.proposalId,
-            ...props
-        }}
-    />
+  <Widget
+    src={`${widgetOwner}/widget/${tabs[state.tab || "home"].widget}`}
+    props={{
+      update,
+      tab: state.tab,
+      accountId: state.accountId,
+      ...props
+    }}
+  />
 );
 
 // To keep our styles  consistent across widgets, let's define them here based on html tags and classes
 const Root = styled.div`
-    font-family:
-        "Open Sans",
-        "Manrope",
-        system-ui,
-        -apple-system,
-        "Segoe UI",
-        Roboto,
-        "Helvetica Neue",
-        "Noto Sans",
-        "Liberation Sans",
-        Arial,
-        sans-serif,
-        "Apple Color Emoji",
-        "Segoe UI Emoji",
-        "Segoe UI Symbol",
-        "Noto Color Emoji";
-    font-size: 16px;
-    line-height: 1.5;
+  font-family:
+    "Open Sans",
+    "Manrope",
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    "Noto Sans",
+    "Liberation Sans",
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+  font-size: 16px;
+  line-height: 1.5;
+  color: #000;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    margin-bottom: 0.5em;
+  }
+
+  h1 {
+    font-size: 28px;
+  }
+
+  h2 {
+    font-size: 24px;
+  }
+
+  h3 {
+    font-size: 20px;
+  }
+
+  h5 {
+    font-size: 14px;
+  }
+
+  h6 {
+    font-size: 12px;
+  }
+
+  a {
     color: #000;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        font-weight: 600;
-        letter-spacing: -0.02em;
-        margin-bottom: 0.5em;
-    }
-
-    h1 {
-        font-size: 28px;
-    }
-
-    h2 {
-        font-size: 24px;
-    }
-
-    h3 {
-        font-size: 20px;
-    }
-
-    h5 {
-        font-size: 14px;
-    }
-
-    h6 {
-        font-size: 12px;
-    }
-
-    a {
-        color: #000;
-        text-decoration: none;
-        transition: color 0.1s ease-in-out;
-    }
-
-    a:hover {
-        color: #4498e0;
-    }
-
-    .ndc-card {
-        border-radius: 16px;
-        box-shadow:
-            rgba(0, 0, 0, 0.1) 0 1px 3px,
-            rgba(0, 0, 0, 0.05) 0 1px 20px;
-        background-color: #fff;
-    }
+    text-decoration: none;
+    transition: color 0.1s ease-in-out;
+  }
+
+  a:hover {
+    color: #4498e0;
+  }
+
+  .ndc-card {
+    border-radius: 16px;
+    box-shadow:
+      rgba(0, 0, 0, 0.1) 0 1px 3px,
+      rgba(0, 0, 0, 0.05) 0 1px 20px;
+    background-color: #fff;
+  }
 `;
 
 return (
-    <Root className="pb-5">
-        <Widget src={`nearui.near/widget/Typography.OpenSansFont`} />
-
-        <Widget
-            src={`${widgetOwner}/widget/DAO.Layout.Header`}
-            props={{
-                daoId: state.daoId
-            }}
-        />
-        <div className="w-100">
-            <Widget
-                src={`${widgetOwner}/widget/DAO.Layout.Tabs`}
-                props={{
-                    tabs: tabs,
-                    tab: state.tab,
-                    update
-                }}
-            />
-            {tabContent}
-        </div>
-    </Root>
+  <Root className="pb-5">
+    <Widget src={`nearui.near/widget/Typography.OpenSansFont`} />
+
+    <Widget
+      src={`${widgetOwner}/widget/DAO.Layout.Header`}
+      props={{
+        daoId: props.daoId
+      }}
+    />
+    <div className="w-100">
+      <Widget
+        src={`${widgetOwner}/widget/DAO.Layout.Tabs`}
+        props={{
+          tabs: tabs,
+          tab: state.tab,
+          update
+        }}
+      />
+      {tabContent}
+    </div>
+  </Root>
 );