added portfolio page

instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx

@@ -24,14 +24,6 @@ const Container = styled.div`
   width: 100%;
 `;
 
-const ContentContainer = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-`;
-
 const AppHeader = ({ page }) => (
   <Widget
     src="${REPL_TREASURY}/widget/components.Navbar"
@@ -48,7 +40,7 @@ function AppLayout({ page, children }) {
       <Theme>
         <Container>
           <AppHeader page={page} />
-          <ContentContainer>{children}</ContentContainer>
+          <div className="px-3 py-2">{children}</div>
         </Container>
       </Theme>
     </ParentContainer>

instances/treasury-devdao.near/widget/config/css.jsx

@@ -1,6 +1,7 @@
 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);
   --text-color: white;
   --link-inactive-color: white;
   --link-active-color: white;

instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx

@@ -0,0 +1,66 @@
+const treasuryAccount = "${REPL_TREASURY}";
+const Portfolio = () => {
+  const tokensAPI = fetch(
+    `https://api3.nearblocks.io/v1/account/${treasuryAccount}/inventory`
+  );
+  const loading = (
+    <Widget src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Spinner"} />
+  );
+  const tokens = tokensAPI?.body?.inventory?.fts ?? [];
+  return (
+    <div className="card card-body flex-1">
+      <div className="h5">Portfolio</div>
+      <div className="">
+        {tokensAPI === null ? (
+          <div className="d-flex justify-content-center align-items-center w-100 h-100">
+            {loading}
+          </div>
+        ) : (
+          <div className="mt-2">
+            {!tokens.length ? (
+              <div className="fw-bold">
+                {treasuryAccount} doesn't own any FTs.
+              </div>
+            ) : (
+              <div className="d-flex flex-column">
+                {tokens.map((item, index) => {
+                  const { ft_meta, amount } = item;
+                  const { decimals, symbol, icon, price } = ft_meta;
+                  const tokensNumber = Big(amount)
+                    .div(Big(10).pow(decimals))
+                    .toFixed(2);
+                  const tokenPrice = price ?? 0;
+                  const currentAmount = Big(tokensNumber)
+                    .mul(tokenPrice)
+                    .toFixed(2);
+                  return (
+                    <div
+                      className={
+                        "py-2 d-flex gap-2 align-items-center justify-content-between " +
+                        (index !== tokens.length - 1 && " border-bottom")
+                      }
+                    >
+                      <div className="d-flex gap-2 align-items-center">
+                        <img src={icon} height={40} />
+                        <div className="">
+                          <div className="h6 mb-0">{symbol}</div>
+                          <div className="d-flex gap-2 text-sm text-muted">
+                            <div>{tokensNumber}</div>
+                            <div>･ ${tokenPrice}</div>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="fw-bold">${currentAmount}</div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+return { Portfolio };

instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx

@@ -0,0 +1,26 @@
+const treasuryAccount = "${REPL_TREASURY}";
+const TransactionHistory = () => {
+  const transactions = fetch(
+    `https://api3.nearblocks.io/v1/account/${treasuryAccount}/activities?per_page=25`
+  );
+  const loading = (
+    <Widget src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Spinner"} />
+  );
+
+  return (
+    <div className="card card-body flex-1">
+      <div className="h5">Transaction History</div>
+      <div className="">
+        {transactions === null ? (
+          <div className="d-flex justify-content-center align-items-center w-100 h-100">
+            {loading}
+          </div>
+        ) : (
+          <div></div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+return { TransactionHistory };

instances/treasury-devdao.near/widget/pages/dashboard/index.jsx

@@ -1 +1,42 @@
-return <h1>Dashboard</h1>;
+const { Portfolio } = VM.require(
+  "${REPL_TREASURY}/widget/pages.dashboard.Portfolio"
+) || { Portfolio: () => <></> };
+
+const treasuryAccount = "${REPL_TREASURY}";
+const { TransactionHistory } = VM.require(
+  "${REPL_TREASURY}/widget/pages.dashboard.TransactionHistory"
+) || { TransactionHistory: () => <></> };
+
+const Wrapper = styled.div`
+  min-height: 80vh;
+  .flex-1 {
+    flex: 1;
+  }
+
+  .text-sm {
+    font-size: 12px;
+  }
+
+  .page-header {
+    color: var(--page-header-color);
+  }
+
+  .border-bottom {
+    border-bottom: 1px solid rgba(226, 230, 236, 1);
+  }
+`;
+
+return (
+  <Wrapper className="d-flex flex-column gap-3">
+    <div className="d-flex justify-content-between gap-2 mt-3">
+      <h4 className="page-header mb-0 fw-bold">Dashboard</h4>
+      <div className="bg-black text-white p-1 px-2 h6 rounded-2">
+        {treasuryAccount}
+      </div>
+    </div>
+    <div className="d-flex gap-2">
+      <Portfolio />
+      <TransactionHistory />
+    </div>
+  </Wrapper>
+);