From 9fbfdf335600560996e0d627c5363d47fa6d3bb7 Mon Sep 17 00:00:00 2001
From: juan <juandgoc@gmail.com>
Date: Mon, 1 Feb 2021 14:46:48 -0500
Subject: [PATCH] nothing borrowed panel

---
 src/components/NothingBorrowedPanel/index.tsx | 35 +++++++++++++++++++
 src/constants/labels.ts                       |  4 +++
 src/views/dashboard/index.tsx                 |  3 +-
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/components/NothingBorrowedPanel/index.tsx

diff --git a/src/components/NothingBorrowedPanel/index.tsx b/src/components/NothingBorrowedPanel/index.tsx
new file mode 100644
index 0000000..b3e9a1e
--- /dev/null
+++ b/src/components/NothingBorrowedPanel/index.tsx
@@ -0,0 +1,35 @@
+import { Button, Card } from "antd";
+import React from "react";
+import { LABELS } from "../../constants";
+import { Link } from "react-router-dom";
+
+export const NothingBorrowedPanel = () => {
+  const bodyStyle: React.CSSProperties = {
+    display: "flex",
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100%",
+  };
+
+  return (
+    <Card bodyStyle={bodyStyle}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-around",
+        }}
+      >
+        <strong>{LABELS.NOTHING_BORROWED}</strong>
+        <br />
+        <p>{LABELS.NOTHING_BORROWED_MESSAGE}</p>
+        <Link to="/borrow">
+          <Button type="primary" size={"large"}>
+            <span>{LABELS.BORROW_NOW}</span>
+          </Button>
+        </Link>
+      </div>
+    </Card>
+  );
+};
diff --git a/src/constants/labels.ts b/src/constants/labels.ts
index c6816f0..55ae60b 100644
--- a/src/constants/labels.ts
+++ b/src/constants/labels.ts
@@ -40,6 +40,10 @@ export const LABELS = {
   NO_COLLATERAL: "No collateral",
   NO_DEPOSITS: "No deposits",
   NO_LOANS: "No loans",
+  NOTHING_BORROWED: "Nothing borrowed yet",
+  NOTHING_BORROWED_MESSAGE:
+    "There will be a list of all the assets you have borrowed. For now, it's empty since you have not borrowed.",
+  BORROW_NOW: "Borrow now",
   LIQUIDATE_QUESTION: "How much would you like to liquidate?",
   LIQUIDATE_ACTION: "Liquidate",
   LIQUIDATE_NO_LOANS: "There are no loans to liquidate.",
diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx
index a2236f0..31cb30b 100644
--- a/src/views/dashboard/index.tsx
+++ b/src/views/dashboard/index.tsx
@@ -6,6 +6,7 @@ import { useUserDeposits, useUserObligations } from "./../../hooks";
 import { DashboardObligations } from "./obligation";
 import { DashboardDeposits } from "./deposit";
 import "./style.less";
+import { NothingBorrowedPanel } from "../../components/NothingBorrowedPanel";
 
 export const DashboardView = () => {
   const { connected } = useWallet();
@@ -45,7 +46,7 @@ export const DashboardView = () => {
             {userObligations.length > 0 ? (
               <DashboardObligations />
             ) : (
-              <Card>{LABELS.NO_LOANS}</Card>
+              <NothingBorrowedPanel />
             )}
           </Col>
         </Row>