From c245322cc136520aca50eba250b069102cdcc091 Mon Sep 17 00:00:00 2001
From: nikhil arora <narora200@gmail.com>
Date: Mon, 13 Feb 2023 10:44:19 +0530
Subject: [PATCH] feat: add links to open position when none

---
 .../src/components/Positions/LPPositions.tsx  |  8 ++---
 .../src/components/Positions/NoPosition.tsx   | 34 +++++++++++++++++++
 .../src/components/Positions/Positions.tsx    | 17 ++++++++--
 .../src/components/Positions/TxHistory.tsx    |  2 +-
 .../src/components/Positions/YourVaults.tsx   |  7 ++--
 .../src/components/Positions/useStyles.ts     |  5 +++
 6 files changed, 58 insertions(+), 15 deletions(-)
 create mode 100644 packages/frontend/src/components/Positions/NoPosition.tsx

diff --git a/packages/frontend/src/components/Positions/LPPositions.tsx b/packages/frontend/src/components/Positions/LPPositions.tsx
index 929da5343..866fc9ab6 100644
--- a/packages/frontend/src/components/Positions/LPPositions.tsx
+++ b/packages/frontend/src/components/Positions/LPPositions.tsx
@@ -1,21 +1,17 @@
 import React from 'react'
 import { useAtomValue } from 'jotai'
-import { Typography } from '@material-ui/core'
 
 import { activePositionsAtom } from '@state/positions/atoms'
 import { poolAtom } from '@state/squeethPool/atoms'
 import { LPTable } from '@components/Lp/LPTable'
+import NoPosition from './NoPosition'
 
 const LPPositions: React.FC = () => {
   const pool = useAtomValue(poolAtom)
   const activePositions = useAtomValue(activePositionsAtom)
 
   if (activePositions.length === 0) {
-    return (
-      <Typography variant="body1" color="textSecondary">
-        No active LP position
-      </Typography>
-    )
+    return <NoPosition noPositionText="No active LP position." ctaText="open a position." ctaLink="/lp" />
   }
 
   return <LPTable isLPage={false} pool={pool!} />
diff --git a/packages/frontend/src/components/Positions/NoPosition.tsx b/packages/frontend/src/components/Positions/NoPosition.tsx
new file mode 100644
index 000000000..0533f70b2
--- /dev/null
+++ b/packages/frontend/src/components/Positions/NoPosition.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Typography } from '@material-ui/core'
+import Link from 'next/link'
+
+import useStyles from './useStyles'
+
+interface NoPositionProps {
+  noPositionText: string
+  ctaText: string
+  ctaLink: string
+}
+
+const NoPosition: React.FC<NoPositionProps> = ({ noPositionText, ctaText, ctaLink }) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.noPositionContainer}>
+      <Typography variant="body1" color="textSecondary">
+        {noPositionText}&nbsp;
+      </Typography>
+
+      <div>
+        <Typography variant="body1" color="primary" component="span">
+          <Link href={ctaLink}>Click here</Link>
+        </Typography>
+        <Typography variant="body1" color="textSecondary" component="span">
+          &nbsp;to {ctaText}
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default NoPosition
diff --git a/packages/frontend/src/components/Positions/Positions.tsx b/packages/frontend/src/components/Positions/Positions.tsx
index 3c15e5980..ecaf61256 100644
--- a/packages/frontend/src/components/Positions/Positions.tsx
+++ b/packages/frontend/src/components/Positions/Positions.tsx
@@ -35,6 +35,7 @@ import ShortSqueeth from './ShortSqueeth'
 import LPedSqueeth from './LPedSqueeth'
 import MintedSqueeth from './MintedSqueeth'
 import BullPosition from './BullPosition'
+import NoPosition from './NoPosition'
 
 const Positions: React.FC = () => {
   const address = useAtomValue(addressAtom)
@@ -113,10 +114,20 @@ const Positions: React.FC = () => {
     mintedDebt.isZero() &&
     lpedSqueeth.isZero()
   ) {
+    if (isLoadingPositions) {
+      return (
+        <Typography variant="body1" color="textSecondary">
+          {'loading...'}
+        </Typography>
+      )
+    }
+
     return (
-      <Typography variant="body1" color="textSecondary">
-        {isLoadingPositions ? 'loading...' : 'No active position'}
-      </Typography>
+      <NoPosition
+        noPositionText="You have no active position."
+        ctaText="stack USDC with Crab 🦀"
+        ctaLink="/strategies/crab"
+      />
     )
   }
 
diff --git a/packages/frontend/src/components/Positions/TxHistory.tsx b/packages/frontend/src/components/Positions/TxHistory.tsx
index fa807efa9..23db470cb 100644
--- a/packages/frontend/src/components/Positions/TxHistory.tsx
+++ b/packages/frontend/src/components/Positions/TxHistory.tsx
@@ -102,7 +102,7 @@ const TxHistory: React.FC = () => {
   if (transactions.length === 0) {
     return (
       <Typography variant="body1" color="textSecondary">
-        No transaction found
+        No transaction found.
       </Typography>
     )
   }
diff --git a/packages/frontend/src/components/Positions/YourVaults.tsx b/packages/frontend/src/components/Positions/YourVaults.tsx
index 62d1cb846..e25b32c5c 100644
--- a/packages/frontend/src/components/Positions/YourVaults.tsx
+++ b/packages/frontend/src/components/Positions/YourVaults.tsx
@@ -9,6 +9,7 @@ import useYourVaults from '@hooks/useYourVaults'
 import { toTokenAmount } from '@utils/calculations'
 import { formatNumber } from '@utils/formatter'
 import useStyles from './useStyles'
+import NoPosition from './NoPosition'
 
 const YourVaults: FC = () => {
   const classes = useStyles()
@@ -31,11 +32,7 @@ const YourVaults: FC = () => {
   }
 
   if (vaults?.length === 0 || !vaults) {
-    return (
-      <Typography variant="body1" color="textSecondary">
-        No vault found
-      </Typography>
-    )
+    return <NoPosition noPositionText="No vault found." ctaText="open a vault." ctaLink="/mint" />
   }
 
   return (
diff --git a/packages/frontend/src/components/Positions/useStyles.ts b/packages/frontend/src/components/Positions/useStyles.ts
index 58e15d857..b029d5904 100644
--- a/packages/frontend/src/components/Positions/useStyles.ts
+++ b/packages/frontend/src/components/Positions/useStyles.ts
@@ -117,6 +117,11 @@ const useStyles = makeStyles((theme) =>
     fontMedium: {
       fontWeight: 500,
     },
+    noPositionContainer: {
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+    },
   }),
 )