From a2ba5197c9ab8b1d835bed3f5b85e4a62123bd0a Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Mon, 17 Jun 2024 20:08:49 +0530
Subject: [PATCH] added portfolio page

---
 .../widget/components/templates/AppLayout.jsx | 10 +--
 .../widget/config/css.jsx                     |  1 +
 .../widget/pages/dashboard/Portfolio.jsx      | 66 +++++++++++++++++++
 .../pages/dashboard/TransactionHistory.jsx    | 26 ++++++++
 .../widget/pages/dashboard/index.jsx          | 43 +++++++++++-
 5 files changed, 136 insertions(+), 10 deletions(-)
 create mode 100644 instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
 create mode 100644 instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx

diff --git a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx b/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
index 76a1cb14..b23f3a91 100644
--- a/instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
+++ b/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>
diff --git a/instances/treasury-devdao.near/widget/config/css.jsx b/instances/treasury-devdao.near/widget/config/css.jsx
index 08518169..8e6f71d3 100644
--- a/instances/treasury-devdao.near/widget/config/css.jsx
+++ b/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;
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
new file mode 100644
index 00000000..dd21f7e8
--- /dev/null
+++ b/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 };
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/TransactionHistory.jsx
new file mode 100644
index 00000000..57c90705
--- /dev/null
+++ b/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 };
diff --git a/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx b/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
index b7e230ba..fa2551f5 100644
--- a/instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
+++ b/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>
+);