feat: add links to open position when none

Author: nikkaroraa

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!} />

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

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"
+      />
     )
   }
 

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>
     )
   }

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 (

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',
+    },
   }),
 )