Setup instance for templar (#118)

Resolves #122 - Setup instance for templar - change header css for all instances using this [design](https://www.figma.com/design/hNg69dceqgi7yMYtovrbYc/%F0%9F%8F%A6-Multisig-Treasury-Application?node-id=5128-9632&node-type=frame&t=K22dXwmsLLyrxFPI-0)
NEAR-DevHub · Nov 15, 2024 · d8f8314 · d8f8314
1 parent 9f40ae5
commit d8f8314
Show file tree

Hide file tree

Showing 32 changed files with 435 additions and 172 deletions.
diff --git a/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx b/instances/treasury-devdao.near/widget/components/DropDownWithSearchAndManualRequest.jsx
@@ -180,7 +180,7 @@ return (
                 setIsOpen(false);
               }}
             >
-              <i class="bi bi-plus-lg"></i>Add manual request
+              <i class="bi bi-plus-lg h5 mb-0"></i>Add manual request
             </div>
           )}
         </div>

diff --git a/instances/treasury-devdao.near/widget/components/Modal.jsx b/instances/treasury-devdao.near/widget/components/Modal.jsx
@@ -42,7 +42,7 @@ const Modal = styled.div`
   }
 
   .theme-btn {
-    background-color: var(--theme-color) !important;
+    background: var(--theme-color) !important;
     color: white;
   }
 `;

diff --git a/instances/treasury-devdao.near/widget/components/Navbar.jsx b/instances/treasury-devdao.near/widget/components/Navbar.jsx
@@ -4,7 +4,7 @@ if (!instance) {
   return <></>;
 }
 
-const { treasuryDaoID, navbarLinks, logo } = VM.require(
+const { treasuryDaoID, navbarLinks, logo, isTesting } = VM.require(
   `${instance}/widget/config.data`
 );
 
@@ -34,23 +34,25 @@ const MenuIcon = () => (
 
 const Navbar = styled.div`
   padding: 1.5rem 1rem;
-  background-color: var(--theme-color);
-  color: var(--text-color);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-
+  color: #1b1b18;
   @media screen and (max-width: 768px) {
     padding: 1.2rem 1rem;
   }
 
   .account-container {
-    background-color: #e3e6e8;
-    color: #2c3e50;
+    color: var(--theme-color) !important;
     font-size: 14px;
     font-weight: 700;
   }
+
+  .text-sm {
+    font-size: 13px;
+    color: #999999;
+  }
 `;
 
 const LinksContainer = styled.div`
@@ -59,10 +61,22 @@ const LinksContainer = styled.div`
   flex-direction: row;
   align-items: center;
   gap: 1.5rem;
-
+  color: #999999 !important;
   @media screen and (max-width: 768px) {
     display: none;
   }
+
+  a {
+    color: inherit !important;
+
+    &:hover {
+      color: #1b1b18 !important;
+    }
+
+    &.active {
+      color: #1b1b18 !important;
+    }
+  }
 `;
 
 const MobileMenu = styled.button`
@@ -115,14 +129,15 @@ function getTitle(text) {
 
 return (
   <Navbar className="position-relative d-flex justify-content-between gap-2">
-    <div className="d-flex align-items-center gap-3">
-      {logo ? (
-        logo
-      ) : (
-        <div className="h4 mb-0">{getTitle(page ?? "dashboard")}</div>
-      )}
-      <div className="account-container py-1 px-2 rounded-3">
-        {treasuryDaoID}
+    <div className="d-flex flex-column gap-2">
+      <div className="d-flex gap-2 align-items-center">
+        {logo && logo}
+        <div className="h3 mb-0">{getTitle(page ?? "dashboard")}</div>
+        {isTesting && <div>(Testing)</div>}
+      </div>
+      <div>
+        <span className="text-sm">Treasury Wallet: </span>
+        <span className="account-container">{treasuryDaoID}</span>
       </div>
     </div>
     <div className="d-flex gap-3 align-items-center">

diff --git a/instances/treasury-devdao.near/widget/components/Tabs.jsx b/instances/treasury-devdao.near/widget/components/Tabs.jsx
@@ -31,11 +31,11 @@ const NavUnderline = styled.ul`
   }
   .active {
     font-weight: bolder;
-    color: var(--theme-color) !important;
+    color: #1b1b18 !important;
     border-bottom: 3px solid var(--theme-color);
   }
   .nav-link:hover {
-    color: var(--theme-color) !important;
+    color: #1b1b18 !important;
     font-weight: bolder;
   }
 `;

diff --git a/instances/treasury-devdao.near/widget/config/css.jsx b/instances/treasury-devdao.near/widget/config/css.jsx
@@ -1,7 +1,6 @@
 const Theme = styled.div`
-  --theme-color: rgba(44, 62, 80, 1);
-  --theme-bg-color: rgba(226, 230, 236, 1);
-  --page-header-color: rgba(54, 61, 69, 1);
+  --theme-color: #05a36e;
+  --theme-bg-color: #f4f4f4;
   --text-color: white;
   --link-inactive-color: white;
   --link-active-color: white;
@@ -26,17 +25,13 @@ const Theme = styled.div`
 
   button {
     &.primary {
-      background-color: var(--theme-color);
+      background: var(--theme-color);
       color: var(--text-color);
       border: none !important;
       padding-block: 0.7rem !important;
     }
   }
 
-  .page-header {
-    color: var(--page-header-color);
-  }
-
   .text-light-grey {
     color: var(--light-grey-color);
   }

diff --git a/instances/treasury-devdao.near/widget/config/data.jsx b/instances/treasury-devdao.near/widget/config/data.jsx
@@ -29,4 +29,26 @@ return {
   showKYC: true,
   showReferenceProposal: true,
   showThresholdConfiguration: false,
+  logo: (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_4823_9241)">
+        <rect width="48" height="48" rx="24" fill="#01EC97" />
+        <path
+          d="M26.6117 7.20001H31.2L20.1882 40.8H15.6L26.6117 7.20001Z"
+          fill="#151515"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4823_9241">
+          <rect width="48" height="48" rx="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  ),
 };
diff --git a/instances/treasury-devdao.near/widget/lib/common.jsx b/instances/treasury-devdao.near/widget/lib/common.jsx
@@ -21,13 +21,17 @@ function getApproversAndThreshold(treasuryDaoID, kind) {
   let requiredVotes = null;
   groupWithPermission.map((i) => {
     approversGroup = approversGroup.concat(i.kind.Group ?? []);
-    if (i.vote_policy[kind].weight_kind === "RoleWeight") {
-      if (Array.isArray(i.vote_policy[kind].threshold)) {
-        ratios = ratios.concat(i.vote_policy[kind].threshold);
-        ratios = ratios.concat(i.vote_policy[kind].threshold);
-      } else {
-        requiredVotes = parseFloat(i.vote_policy[kind].threshold);
+    if (Object.values(i.vote_policy ?? {}).length > 0) {
+      if (i.vote_policy[kind].weight_kind === "RoleWeight") {
+        if (Array.isArray(i.vote_policy[kind].threshold)) {
+          ratios = ratios.concat(i.vote_policy[kind].threshold);
+          ratios = ratios.concat(i.vote_policy[kind].threshold);
+        } else {
+          requiredVotes = parseFloat(i.vote_policy[kind].threshold);
+        }
       }
+    } else {
+      ratios = [50, 100];
     }
   });
 
@@ -334,7 +338,7 @@ function getPermissionsText(type) {
     case "Create requests":
       return "Enables users to initiate payment requests.";
     case "Manage Members": {
-      return "Allows users to control treasury adminis and their access levels.";
+      return "Allows users to control treasury admins and their access levels.";
     }
     case "Vote": {
       return "Allows users to approve or request proposed payment requests.";

diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
@@ -104,28 +104,32 @@ const NearPortfolio = () => {
           nearPrice
         )}
       />
-      {nearStakedTokens && nearStakedTokens !== "0" && (
-        <Item
-          isStakedToken={true}
-          showBorderBottom={true}
-          icon={nearTokenIcon}
-          symbol={"Staked"}
-          tokenPrice={nearPrice}
-          tokensNumber={nearStakedTokens}
-          currentAmount={getPrice(nearStakedTokens, nearPrice)}
-        />
-      )}
-      {nearUnStakedTokens && nearUnStakedTokens !== "0" && (
-        <Item
-          isStakedToken={true}
-          showBorderBottom={true}
-          icon={nearTokenIcon}
-          symbol={"Unstaked"}
-          tokenPrice={nearPrice}
-          tokensNumber={nearUnStakedTokens}
-          currentAmount={getPrice(nearUnStakedTokens, nearPrice)}
-        />
-      )}
+      {nearStakedTokens &&
+        nearStakedTokens !== "0" &&
+        nearStakedTokens !== "0.0000" && (
+          <Item
+            isStakedToken={true}
+            showBorderBottom={true}
+            icon={nearTokenIcon}
+            symbol={"Staked"}
+            tokenPrice={nearPrice}
+            tokensNumber={nearStakedTokens}
+            currentAmount={getPrice(nearStakedTokens, nearPrice)}
+          />
+        )}
+      {nearUnStakedTokens &&
+        nearUnStakedTokens !== "0" &&
+        nearUnStakedTokens !== "0.0000" && (
+          <Item
+            isStakedToken={true}
+            showBorderBottom={true}
+            icon={nearTokenIcon}
+            symbol={"Unstaked"}
+            tokenPrice={nearPrice}
+            tokensNumber={nearUnStakedTokens}
+            currentAmount={getPrice(nearUnStakedTokens, nearPrice)}
+          />
+        )}
 
       <Item
         isStakedToken={true}

diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
@@ -89,50 +89,50 @@ const totalBalance = Big(nearBalances?.totalParsed ?? "0")
   .toFixed(4);
 
 return (
-  <Wrapper className="d-flex flex-column gap-3">
-    <div className="d-flex justify-content-between gap-2 mt-3">
-      <Widget
-        src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.StakedNearIframe`}
-        props={{
-          instance,
-          setNearStakedTokens: (v) => setNearStakedTokens(Big(v).toFixed(4)),
-          setNearUnstakedTokens: (v) =>
-            setNearUnStakedTokens(Big(v).toFixed(4)),
-          setNearStakedTotalTokens: (v) =>
-            setNearStakedTotalTokens(Big(v).toFixed(4)),
-        }}
-      />
-      <h4 className="page-header">Dashboard</h4>
-    </div>
-    <div className="card card-body" style={{ maxHeight: "100px" }}>
-      <div className="h5">Total Balance</div>
-      {typeof getNearBalances !== "function" || nearPrice === null ? (
-        loading
-      ) : (
-        <div className="fw-bold h3">${totalBalance} USD</div>
-      )}
-    </div>
-    <div className="d-flex gap-2 flex-wrap dashboard-item">
-      <Widget
-        src={"${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/pages.dashboard.Portfolio"}
-        props={{
-          instance,
-          ftTokens: userFTTokens.fts,
-          nearStakedTokens,
-          nearUnStakedTokens,
-          nearPrice,
-          nearStakedTotalTokens,
-        }}
-      />
-      <Widget
-        src={
-          "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/pages.dashboard.TransactionHistory"
-        }
-        props={{
-          nearPrice: nearPrice,
-          ...props,
-        }}
-      />
+  <Wrapper>
+    <Widget
+      src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.StakedNearIframe`}
+      props={{
+        instance,
+        setNearStakedTokens: (v) => setNearStakedTokens(Big(v).toFixed(4)),
+        setNearUnstakedTokens: (v) => setNearUnStakedTokens(Big(v).toFixed(4)),
+        setNearStakedTotalTokens: (v) =>
+          setNearStakedTotalTokens(Big(v).toFixed(4)),
+      }}
+    />
+    <div className="d-flex flex-column gap-3">
+      <div className="card card-body" style={{ maxHeight: "100px" }}>
+        <div className="h5">Total Balance</div>
+        {typeof getNearBalances !== "function" || nearPrice === null ? (
+          loading
+        ) : (
+          <div className="fw-bold h3">${totalBalance} USD</div>
+        )}
+      </div>
+      <div className="d-flex gap-2 flex-wrap dashboard-item">
+        <Widget
+          src={
+            "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/pages.dashboard.Portfolio"
+          }
+          props={{
+            instance,
+            ftTokens: userFTTokens.fts,
+            nearStakedTokens,
+            nearUnStakedTokens,
+            nearPrice,
+            nearStakedTotalTokens,
+          }}
+        />
+        <Widget
+          src={
+            "${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/pages.dashboard.TransactionHistory"
+          }
+          props={{
+            nearPrice: nearPrice,
+            ...props,
+          }}
+        />
+      </div>
     </div>
   </Wrapper>
 );
diff --git a/instances/treasury-devdao.near/widget/pages/payments/CreatePaymentRequest.jsx b/instances/treasury-devdao.near/widget/pages/payments/CreatePaymentRequest.jsx
@@ -215,7 +215,7 @@ const Container = styled.div`
     border-radius: 5px !important;
   }
   .theme-btn {
-    background-color: var(--theme-color) !important;
+    background: var(--theme-color) !important;
     color: white;
   }
 

diff --git a/instances/treasury-devdao.near/widget/pages/payments/PaymentRecipients.jsx b/instances/treasury-devdao.near/widget/pages/payments/PaymentRecipients.jsx
diff --git a/instances/treasury-devdao.near/widget/pages/payments/index.jsx b/instances/treasury-devdao.near/widget/pages/payments/index.jsx
@@ -29,10 +29,10 @@ const SidebarMenu = ({ currentTab }) => {
     >
       {hasCreatePermission && (
         <button
-          className="primary p-2 rounded-2 h6 fw-bold d-flex align-items-center gap-2 mb-0"
+          className="primary py-1 px-3 rounded-2 h6 fw-bold d-flex align-items-center gap-2 mb-0"
           onClick={() => setShowCreateRequest(true)}
         >
-          <i class="bi bi-plus-circle-fill"></i>Create Request
+          <i class="bi bi-plus-lg h5 mb-0"></i>Create Request
         </button>
       )}
       <Widget
-Original file line number
+Diff line change
@@ Expand Up / @@ -180,7 +180,7 @@ return ( @@
                     setIsOpen(false);
                   }}
                 >
-                  <i class="bi bi-plus-lg"></i>Add manual request
+                  <i class="bi bi-plus-lg h5 mb-0"></i>Add manual request
                 </div>
               )}
             </div>
@@ Expand Down @@