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 ( - - No active LP position - - ) + return } return 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 = ({ noPositionText, ctaText, ctaLink }) => { + const classes = useStyles() + + return ( +
+ + {noPositionText}  + + +
+ + Click here + + +  to {ctaText} + +
+
+ ) +} + +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 ( + + {'loading...'} + + ) + } + return ( - - {isLoadingPositions ? 'loading...' : 'No active position'} - + ) } 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 ( - No transaction found + No transaction found. ) } 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 ( - - No vault found - - ) + return } 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', + }, }), )