Sync Staging (#236)

Co-authored-by: Andrew <saychuk.andriy@gmail.com> Co-authored-by: Thomas <thomas@guntenaar.org> Co-authored-by: Peter Salomonsen <pjsalomonsen@gmail.com>
NEAR-DevHub · Jan 29, 2025 · e4f7861 · e4f7861
1 parent 27a3107
commit e4f7861
Show file tree

Hide file tree

Showing 58 changed files with 2,960 additions and 1,792 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -18,7 +18,8 @@
       "extensions": [
         "ms-playwright.playwright",
         "github.vscode-github-actions",
-        "rust-lang.rust-analyzer"
+        "rust-lang.rust-analyzer",
+        "github.copilot"
       ]
     }
   },

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -97,6 +97,10 @@ jobs:
           npx playwright install
       - name: Build project
         run: npm run build
+      - name: Build sandbox
+        run: |
+          npm run build:sandbox
+        continue-on-error: false
       - name: Run tests
         run: |
           ${{ matrix.target_account.test_command }}

diff --git a/instances/test-widgets.treasury-factory.near/aliases.mainnet.json b/instances/test-widgets.treasury-factory.near/aliases.mainnet.json
@@ -10,5 +10,6 @@
   "REPL_RPC_URL": "https://rpc.mainnet.near.org",
   "REPL_PROPOSALS_CACHE_URL": "https://devhub-cache-api-rs.fly.dev",
   "REPL_PIKESPEAK_KEY": "36f2b87a-7ee6-40d8-80b9-5e68e587a5b5",
-  "REPL_NEARBLOCKS_KEY": "DA2570E26C0242FF897A463F4DCAACA6"
+  "REPL_NEARBLOCKS_KEY": "DA2570E26C0242FF897A463F4DCAACA6",
+  "REPL_BACKEND_API": "https://ref-sdk-api.fly.dev/api"
 }
diff --git a/instances/treasury-factory.near/widget/components/create-treasury/SummaryStep.jsx b/instances/treasury-factory.near/widget/components/create-treasury/SummaryStep.jsx
@@ -103,6 +103,7 @@ function filterMemberByPermission(permission) {
     .map((acc) => acc.accountId);
 }
 
+// Permissions are set using https://github.com/near-daos/sputnik-dao-contract/blob/main/sputnikdao2/src/proposals.rs#L119
 function createDao() {
   const createDaoConfig = {
     config: {
@@ -117,11 +118,7 @@ function createDao() {
             Group: filterMemberByPermission(PERMISSIONS.create),
           },
           name: "Create Requests",
-          permissions: [
-            "call:AddProposal",
-            "transfer:AddProposal",
-            "config:Finalize",
-          ],
+          permissions: ["call:AddProposal", "transfer:AddProposal"],
           vote_policy: {},
         },
         {
@@ -134,6 +131,16 @@ function createDao() {
             "policy:*",
             "add_member_to_role:*",
             "remove_member_from_role:*",
+            "upgrade_self:*",
+            "upgrade_remote:*",
+            "set_vote_token:*",
+            "add_bounty:*",
+            "bounty_done:*",
+            "factory_info_update:*",
+            "policy_add_or_update_role:*",
+            "policy_remove_role:*",
+            "policy_update_default_vote_policy:*",
+            "policy_update_parameters:*",
           ],
           vote_policy: {},
         },
@@ -142,7 +149,13 @@ function createDao() {
             Group: filterMemberByPermission(PERMISSIONS.vote),
           },
           name: "Vote",
-          permissions: ["*:VoteReject", "*:VoteApprove", "*:VoteRemove"],
+          permissions: [
+            "*:VoteReject",
+            "*:VoteApprove",
+            "*:VoteRemove",
+            "*:RemoveProposal",
+            "*:Finalize",
+          ],
           vote_policy: {},
         },
       ],

diff --git a/instances/treasury-factory.near/widget/pages/treasury/Create.jsx b/instances/treasury-factory.near/widget/pages/treasury/Create.jsx
@@ -72,7 +72,7 @@ const Wrapper = ({ title, children }) => (
       <div style={{ width: "150px" }}>
         <a
           className="btn btn-outline-plain w-100"
-          href={`https://near.social/${REPL_DEVDAO_ACCOUNT}/widget/app`}
+          href={`https://neartreasury.com/`}
         >
           Cancel creation
         </a>

diff --git a/instances/widgets.treasury-factory.near/aliases.mainnet.json b/instances/widgets.treasury-factory.near/aliases.mainnet.json
@@ -10,5 +10,6 @@
   "REPL_RPC_URL": "https://rpc.mainnet.near.org",
   "REPL_PROPOSALS_CACHE_URL": "https://devhub-cache-api-rs.fly.dev",
   "REPL_PIKESPEAK_KEY": "36f2b87a-7ee6-40d8-80b9-5e68e587a5b5",
-  "REPL_NEARBLOCKS_KEY": "DA2570E26C0242FF897A463F4DCAACA6"
+  "REPL_NEARBLOCKS_KEY": "DA2570E26C0242FF897A463F4DCAACA6",
+  "REPL_BACKEND_API": "https://ref-sdk-api.fly.dev/api"
 }
diff --git a/instances/widgets.treasury-factory.near/widget/app.jsx b/instances/widgets.treasury-factory.near/widget/app.jsx
@@ -13,10 +13,6 @@ const { AppLayout } = VM.require(
 const instance = "${REPL_INSTANCE}";
 const treasuryDaoID = "${REPL_TREASURY}";
 
-const { Theme } = VM.require(`${instance}/widget/config.css`) || {
-  Theme: () => <></>,
-};
-
 if (!page) {
   // If no page is specified, we default to the feed page TEMP
   page = "dashboard";
@@ -84,14 +80,12 @@ function Page() {
 }
 
 return (
-  <Theme>
-    <AppLayout
-      page={page}
-      instance={instance}
-      treasuryDaoID={treasuryDaoID}
-      accountId={context.accountId}
-    >
-      <Page />
-    </AppLayout>
-  </Theme>
+  <AppLayout
+    page={page}
+    instance={instance}
+    treasuryDaoID={treasuryDaoID}
+    accountId={context.accountId}
+  >
+    <Page />
+  </AppLayout>
 );
diff --git a/instances/widgets.treasury-factory.near/widget/components/Approvers.jsx b/instances/widgets.treasury-factory.near/widget/components/Approvers.jsx
@@ -1,19 +1,15 @@
-const { isNearSocial } = VM.require(
-  "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.common"
+const { Approval, Reject } = VM.require(
+  "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Icons"
 ) || {
-  isNearSocial: false,
+  Approval: () => <></>,
+  Reject: () => <></>,
 };
 
 const votes = props.votes ?? {};
 const accounts = Object.keys(votes);
 const approversGroup = props.approversGroup ?? [];
 const maxShow = 1;
 const showHover = accounts?.length > maxShow;
-const approve =
-  "https://ipfs.near.social/ipfs/bafkreib52fq4kw7gyfsupz4mrtrexbusc2lplxnopqswa5awtnlqmenena";
-const reject =
-  "https://ipfs.near.social/ipfs/bafkreihrwi2nzl7d2dyij3tstr6tdr7fnioq7vu37en3dxt4faihxreabm";
-
 const maxIndex = 100;
 
 const Container = styled.div`
@@ -28,35 +24,37 @@ function getImage(acc) {
   return `https://i.near.social/magic/large/https://near.social/magic/img/account/${acc}`;
 }
 
+const ApprovalImage = styled.div`
+  position: relative;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 40px;
+  width: 40px;
+  .status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+`;
+
 const ApproversComponent = (
   <div className="d-flex align-items-center">
     {accounts.slice(0, maxShow).map((acc, index) => {
       const imageSrc = getImage(acc);
-      const voteImg = votes[acc] === "Approve" ? approve : reject;
       return (
-        <div
+        <ApprovalImage
           style={{
             marginLeft: index > 0 ? "-10px" : 0,
             zIndex: maxIndex - index,
-            position: "relative",
+            backgroundImage: `url("${imageSrc}")`,
           }}
+          className="rounded-circle"
         >
-          <img
-            src={imageSrc}
-            height={40}
-            width={40}
-            className="rounded-circle"
-          />
-          <img
-            src={voteImg}
-            height={20}
-            style={
-              isNearSocial
-                ? { marginTop: 25, marginLeft: "-20px" }
-                : { marginTop: "-17px", marginLeft: "23px" }
-            }
-          />
-        </div>
+          <div className="status">
+            {votes[acc] === "Approve" ? <Approval /> : <Reject />}
+          </div>
+        </ApprovalImage>
       );
     })}
     {accounts.length > maxShow && (
@@ -108,23 +106,22 @@ return (
                       }}
                     >
                       <div>
-                        <img
-                          src={imageSrc}
-                          height={40}
-                          width={40}
+                        <ApprovalImage
+                          style={{
+                            backgroundImage: `url("${imageSrc}")`,
+                          }}
                           className="rounded-circle"
-                        />
-                        {voted && (
-                          <img
-                            src={voteImg}
-                            height={20}
-                            style={
-                              isNearSocial
-                                ? { marginTop: 17, marginLeft: "-15px" }
-                                : { marginTop: "-19px", marginLeft: "21px" }
-                            }
-                          />
-                        )}
+                        >
+                          {voted && (
+                            <div className="status">
+                              {votes[acc] === "Approve" ? (
+                                <Approval />
+                              ) : (
+                                <Reject />
+                              )}
+                            </div>
+                          )}
+                        </ApprovalImage>
                       </div>
                       <div className="d-flex flex-column">
                         <div className="h6 mb-0 text-break">{name ?? acc}</div>

diff --git a/instances/widgets.treasury-factory.near/widget/components/Icons.jsx b/instances/widgets.treasury-factory.near/widget/components/Icons.jsx
@@ -235,6 +235,122 @@ const NotVerfiedTick = ({ height, width }) => (
   </svg>
 );
 
+const User = ({ height, width }) => (
+  <svg
+    width={width ?? 20}
+    height={height ?? 20}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.6666 17.5V15.8333C16.6666 14.9493 16.3155 14.1014 15.6903 13.4763C15.0652 12.8512 14.2174 12.5 13.3333 12.5H6.66665C5.78259 12.5 4.93474 12.8512 4.30962 13.4763C3.6845 14.1014 3.33331 14.9493 3.33331 15.8333V17.5"
+      stroke="var(--icon-color)"
+      stroke-width="1.66667"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10 9.16667C11.841 9.16667 13.3334 7.67428 13.3334 5.83333C13.3334 3.99238 11.841 2.5 10 2.5C8.15907 2.5 6.66669 3.99238 6.66669 5.83333C6.66669 7.67428 8.15907 9.16667 10 9.16667Z"
+      stroke="var(--icon-color)"
+      stroke-width="1.66667"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+const Copy = ({ height, width }) => (
+  <svg
+    width={width ?? 20}
+    height={height ?? 20}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_4358_31006)">
+      <path
+        d="M16.6667 7.5H9.16667C8.24619 7.5 7.5 8.24619 7.5 9.16667V16.6667C7.5 17.5871 8.24619 18.3333 9.16667 18.3333H16.6667C17.5871 18.3333 18.3333 17.5871 18.3333 16.6667V9.16667C18.3333 8.24619 17.5871 7.5 16.6667 7.5Z"
+        stroke="var(--icon-color)"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M4.16669 12.4998H3.33335C2.89133 12.4998 2.4674 12.3242 2.15484 12.0117C1.84228 11.6991 1.66669 11.2752 1.66669 10.8332V3.33317C1.66669 2.89114 1.84228 2.46722 2.15484 2.15466C2.4674 1.8421 2.89133 1.6665 3.33335 1.6665H10.8334C11.2754 1.6665 11.6993 1.8421 12.0119 2.15466C12.3244 2.46722 12.5 2.89114 12.5 3.33317V4.1665"
+        stroke="var(--icon-color)"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4358_31006">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const Approval = ({ height, width }) => (
+  <svg
+    width={width ?? 20}
+    height={height ?? 20}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="10"
+      cy="10"
+      r="9"
+      fill="#3CB179"
+      stroke="var(--icon-color)"
+      stroke-width="2"
+    />
+    <path
+      d="M14 7L8.5 12.5L6 10"
+      stroke="var(--icon-color)"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+const Reject = ({ height, width }) => (
+  <svg
+    width={width ?? 21}
+    height={height ?? 20}
+    viewBox="0 0 21 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="10.5"
+      cy="10"
+      r="9"
+      fill="#D95C4A"
+      stroke="var(--icon-color)"
+      stroke-width="2"
+    />
+    <path
+      d="M13.5 7L7.5 13"
+      stroke="var(--icon-color)"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7.5 7L13.5 13"
+      stroke="var(--icon-color)"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
 return {
   NearToken,
   WithdrawIcon,
@@ -244,4 +360,8 @@ return {
   Whitelist,
   VerifiedTick,
   NotVerfiedTick,
+  User,
+  Copy,
+  Approval,
+  Reject,
 };
diff --git a/instances/widgets.treasury-factory.near/widget/components/Navbar.jsx b/instances/widgets.treasury-factory.near/widget/components/Navbar.jsx
@@ -143,7 +143,11 @@ return (
         <div className="d-flex flex-column">
           <div className="h4 mb-0 d-flex flex-row gap-2 align-items-center">
             <div className="page-title">{getTitle(page ?? "dashboard")}</div>
-            {isTesting && <small className="badge">Testing</small>}
+            {isTesting ? (
+              <small className="badge">Testing</small>
+            ) : (
+              <small className="badge">Beta</small>
+            )}
           </div>
 
           <div>